vue-cli3配置多项目并按项目分别实现打包

这篇文章主要介绍了vue-cli3配置多项目并按项目分别实现打包方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教

vue-cli3配置多项目并按项目分别打包

demo地址：https://github.com/lmy01/vue-multipage

本次项目由于分为客户端和客服端，第一反应便是在vue中构建多页面。

项目结构

这里主要讲解下面所标文件的用处

vue.config.js相关配置

配置好之后，运行npm run build，项目被打包到dist文件夹下，结果如下图：

可以看出不同项目的资源都会打包到了一起，但这不是我想要的结果，那么接下来只需要修改一下vue.config.js配置，即可使打包的文件按照项目进行分离。

let projectName = process.argv[3] let glob = require('glob') function getEntry() { let entries = {} if (process.env.NODE_ENV == 'production') { entries = { index: { // page的入口 entry: 'src/views/' + projectName + '/'+projectName+'.js', // 模板来源 template: 'public/'+projectName+'.html', // 在 dist/index.html 的输出 filename: 'index.html', title: 'CIMS--'+projectName, chunks: ['chunk-vendors', 'chunk-common', 'index'] } } } else { let items = glob.sync( './src/views/*/*.js') for (let i in items) { let filepath = items[i] let fileList = filepath.split('/'); let fileName = fileList[fileList.length-2]; entries[fileName] = { entry: `src/views/${fileName}/${fileName}.js`, // 模板来源 template: `public/${fileName}.html`, // 在 dist/index.html 的输出 filename: `${fileName}.html`, title:`CIMS--${fileName}`, // 提取出来的通用 chunk 和 vendor chunk。 chunks: ['chunk-vendors', 'chunk-common', fileName] } } } return entries } let pages = getEntry() module.exports = { outputDir: 'dist/' + projectName, productionSourceMap: false, pages:pages, }

注意

这时候再打包需要逐个对项目进行打包，npm run build client npm run build console

下面就是打包后的每个项目文件夹下的文件。

但是我们发现public里面的模板文件也被打包进来了，这是因为public是专门存放静态文件的，打包的时候会把public里的内容原样输出到打包后的文件夹中，如果我们不想让他打包进去，那么就把模板文件从public文件夹中拿出来，我们在项目根目录下重新建一个文件夹（/html），用来存放这两个模板文件。