基于vue-cli3多模块独立打包
一、目标
我们要实现什么？
所谓分模块打包，也可以说一个项目一个模块，理解：
在src目录下，多个项目共用一些数据方法，但是每个项目有自己独立的入口文件，路由文件，界面样式都不同，可以单独运行，单独打包。
按照这种构想，我在一个新的脚手架src目录下新建了一个projects目录：
如上图，可以看到Aproject、B、C、D四个项目。我在A项目中建了assets，common和views文件夹，其中assets可以再建img和css的文件夹，common内可以放公共组件或者方法，views页面可以放页面，甚至你还可以建一个components文件夹专门用来放组件。
好了，我们的视图目录结构大概就是上面的样子。我们期待的是，我们可以打包这个A模块这个‘小vue’，就像打包一个完整vue的项目一样。那么如何实现这部分呢？
最主要是在vue.config.js配置里，通过控制入口文件的路径和输出的路径实现，分模块打包
const configJSON = require('./Config11.js')
const tmp = configJSON.tenant.split('_')
const tenanKey = tmp[0] + '_' + tmp[1] + '_' + tmp[2]
const tenantPath = tmp[0] + '_' + tmp[1] + '/' + tmp[2]
// console.log("配置信息" + JSON.stringify(tenanKey))
let projectConfig;
if (tenanKey) {
projectConfig = {
pages: {
index: {
entry: `src/projects/${tenantPath}/main.js`,
outputDir: `dist/${tenanKey}`,
title: configJSON.title,
filename: 'index.html',
template: 'public/index.html'
}
}
// 更多...
}
} else {
// console.log("请输入正确的配置信息")
}
// console.log("配置信息" + JSON.stringify(projectConfig));
module.exports = {
pages: projectConfig.pages,
lintOnSave: false
}
————————————————
参考链接：https://blog.csdn.net/Oralinge/article/details/103813020
https://segmentfault.com/a/1190000014571631?utm_source=tag-newest