需求
1:公司项目页面定制化卖给不同的甲方,有的客户要A,B,C模块,有的要C,D模块,有的要A,D模块。如何按需打包给对方?
实现原理
1:下面以vue-cli3 构建的项目为例子来了解 核心逻辑其实就是构建不同的router.js来区分,客户1的router里含有A,B,C,客户2的router里含有C,D即可。 我们可以想到把router.js分成好几个不同的路由。 那么问题来了。入口main.js引用了router.js 也要每次都切换router.js来打包,这样main.js的代码并不好维护。
解决方案
我们可以同样把main.js 拆成 main_CustomerA.js 和 main_CustomerB.js,然后使用webpack的特性mode来读取不同的main.js
首先在package.json所在的根目录下新建 .env.CustomerA 和 .env.CustomerB 两个文件 分别写上代码:
VUE_PROJECT_NAME = "CustomerA"
NODE_ENV = "production"
复制代码
VUE_PROJECT_NAME = "CustomerB"
NODE_ENV = "production"
复制代码
然后在vue.config.js中写入
module.exports = {
outputDir: 'dist',
pages: {
index: {
// page 的入口
entry: 'src/main_' + process.env.VUE_PROJECT_NAME +'.js',
},
},
复制代码
在package.json的script中写入
"build_CustomerA": "vue-cli-service build --mode CustomerA",
"build_CustomerB": "vue-cli-service build --mode CustomerB",
复制代码
我们会发现当执行 build_CustomerA的时候,mode为CustomerA。webpack会去找.env.CustomerA文件。将其中的内容覆盖掉 process.env 的对象字面量。然后 entry指向到main_CustomerA.js 下。main_CustomerA.js指向 router_CustomerA.js。 router_CustomerA.js中含有A,B,C页面,则打包的时候,只有A,B,C页面进入了最终的dist文件夹。实现了对页面级的按需打包。 也方便测试进行按需测试。
作者:嚣张的胖头鱼
链接:https://juejin.im/post/5dda82fff265da7de713449a
来源:掘金
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。