vue-cli分模块独立打包

基于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

　　　　　https://segmentfault.com/a/1190000009543196

　　　　　https://www.cnblogs.com/mmzuo-798/p/12264261.html