背景

据我所知电商行业H5前端所承载的任务主要是拉新，保持用户粘性，保持项目生态的完整性以及数据展示，管理系统。

所以对应到产品就是活动页面（拉新，保持用户粘性），各家小程序（保持项目生态的完整性），pc后台管理系统（数据展示，管理系统）

根据三种产品的不同特性，我们需要把vue的打包方式进行升级。下面介绍比较常见的两种升级优化打包方式

支持多项目打包

由于vue-cli3把webpack"隐藏"起来了，可实际上极大的提升了我们升级难度，你无需面对那些webpack代码，只要维护vue.config.js就好

多项目打包解决N多活动页面一起打包，部署。避免了需要建N多项目。
先来看下目录结构

image.png

projectA,projectB是三个业务上没有关系的三个项目，但是可以共用一些公用的组件、公用工具类、公用样式等。
要实现npm run dev/build projectA 编译打包的时候，只编译打包项目projectA，而projectB和projectC不会编译打包进来。

思路

一开始想通过
vue-cli-service build --target lib --name myLib [entry]
这样指定目标地址生成。
这样生成的结构是这样的

image.png

和我们设想的不一样。所以我想提供这样的方式是为了打包库用的。但我们是希望打包应用。
换个思路我们只在项目外面添加了projectA这个文件夹，所以我们只要改变入口和出口就可以
结果当然是ok啦！再不ok。我就放弃cli3了。。
下面是我的vue.config.js

let projectname = process.argv[3];
module.exports = {
    outputDir:'dist/'+projectname,
    pages: {
      index: {
        // page 的入口
        entry: 'src/'+ projectname+'/main.js',
        // 模板来源
        template: 'public/index.html',
        // 在 dist/index.html 的输出
        filename: 'index.html',
        // 当使用 title 选项时，
        // template 中的 title 标签需要是 <title><%= htmlWebpackPlugin.options.title %></title>
        title: 'Index Page',
        // 在这个页面中包含的块，默认情况下会包含
        // 提取出来的通用 chunk 和 vendor chunk。
        chunks: ['chunk-vendors', 'chunk-common', 'index']
      }
    }
}

接下来只要运行