qiankun 传统项目配置_记一次 微前端 qiankun 项目 实践 !!! 防踩坑指南

function resolve(dir) {return path.join(__dirname, dir);}

const port = 7101; // dev portmodule.exports = {

publicPath:`//localhost:${port}`,outputDir: 'dist',assetsDir: 'static',filenameHashing: true,

devServer: {// host: '0.0.0.0',hot: true,historyApiFallback: true,//添加 重点port,overlay: {warnings: false,errors: true,},headers: {'Access-Control-Allow-Origin': '*',},},

configureWebpack: {resolve: {alias: {'@': resolve('src'),},},output: {library: `${packageName}-[name]`,libraryTarget: 'umd',jsonpFunction: `webpackJsonp_${packageName}`,},},};

采坑记录当前页面为子应用时, 刷新页面404

以下方式均为主应用配置

方式一 删除 mode 配置项

mode: 'history', // 将此配置代码删除

方式二 配置404 页面

如果没有注释掉 mode: 'history' 此参数将404 页面重新导向 home首页

{path: '*',name: 'indexNotFound',component: resolve => require(['@/components/home'], resolve),children: HomeChild,},

子应用 样式隔离 开始沙箱模式 遇到的问题

主应用配置 sandbox :{strictStyleIsolation: true} 渲染模式由 render 模式 改为 container container:'#subView' ,此时 子应用的 挂载 dom 为

子应用配置上文有提到 主要代码 截取 instance = new Vue({ router, store, render: h => h(App), }).$mount(container ? container.querySelector('#app') : '#app'); //重点 ``效果图

写到这里,项目已经构建完成了 让我们来看看效果吧

这里是完整代码 方便大家学习代码github地址

项目问题

为啥我项目启动后看不到子应用的效果 将master 主应用 main.js 中 注册的 子应用的端口号 改成自己项目的端口号即可

结语

开发中还有其他坑 忘记记录了, 千万记得项目部署子应用资源跨域的问题 , 需要Nginx配置跨域问题

前端界的一枚小学生!!!

源自：https://juejin.im/post/5ea55417e51d4546e347fda9

声明：文章著作权归作者所有，如有侵权，请联系小编删除。返回搜狐，查看更多