当前位置: 首页 > Web前端 > vue.js

实现vue&react混合开发项目步骤-微前端

时间:2023-04-01 00:33:08 vue.js

//创建一个核心项目——vuevuecreatevue-core//创建一个vue应用——vuevuecreatevue-child//创建一个react应用——reactnpxcreate-react-appreact-childinvue-core//在app.vue中文件HOMEVUE应用React应用HOME//默认

//vue项目
//react项目//main.jsimportVuefrom'vue'importAppfrom'./App.vue'importrouterfrom'./router'importElementUIfrom'element-ui'import'element-ui/lib...'//StyleVue.use(ElementUI)//introduceqiankunimport{registerMicroApps,start}from'qiankun'constapps=[{name:'vueapp',entry:'//localhost:10000',//默认加载这个html,解析里面的JS动态执行子必须支持跨域的应用程序ontainer:'#app',activeRule:'/vue',props:{a:1}},{name:'reactapp',entry:'//localhost:20000',//加载这个html解析里面的jsdefault子应用动态执行必须支持跨域container:'#react',activeRule:'/react'}]registerMicroApps(apps)constoptions={}start(options)//optionsparameterapinewVue({router,render:h=>h(App)}).$mount('#app')vue-child//main.jsimportVuefrom'vue'importAppfrom'./App.vue'importrouterfrom'./router'letinstance=nullif(window.__POWERED_BY_QIANKUN__){__webpack_public_path__=window.__INJECTED_PUBLIC_PATH_BY_QIANKUN__}if(!window.__POWERED_BY_QIANKUN__){render();}导出异步函数bootstrap(props){}导出异步函数mount(props){render(props)}exportasyncfunctionunmount(props){instance.$destroy()}functionrender(props){instance=newVue({router,render:h=>h(App)}).$mount('#app')}//vue.config.jsmodule.exports={devServer:{port:10000,headers:{'Access-Control-allow-Origin':'*'}},configureWebpack:{output:{library:'vueApp',libraryTarget:'umd'}}}React-child//安装重写webpack插件yarnaddreact-app-rewired-D//修改package.jsonscript:{"start":"react-app-rewiredstart","build":"react-app-rewiredbuild","test":"react-app-rewiredtest","eject":"react-app-rewiredeject",}//创建config-overrides.js重写文件module.exports={webpack:(config)=>{config.output.library='reactApp'config.output.libraryTarget='umd'config.output.publicPath='http://localhost:2000/'返回配置}devServer:(configFunction)=>{returnfunction(proxy,allowedHost){constconfig=configFunction(proxy,allowedHost)config.port=20000config.headers={'Access-Control-allow-Origin':'*'}returnconfig}}}//索引。jsimportReactfrom'react'importReactDOMfrom'react-dom'importAppfrom'./App'if(!window.__POWERED_BY_QIANKUN__){render();}exportasyncfunctionbootstrap(){}exportasyncfunctionmount(){render(props)}导出异步函数unmount(){ReactDOM.unmountComponentAtNode(document.getElementById('root'))}functionrender(){ReactDOM.render(,document.getElementById('根'))}