我们在开发vue 项目的时候，大多数情况下都是使用官方提供的开箱即用的模板，一顿操作猛如虎，那酸爽，回味无穷。然后我们需要起一个新项目的时候，cv大法屡试不爽（ctrl+c,ctrl+v）。一顿粘贴复制操作，回头大刀阔斧增删改，内心波涛汹涌。完事干净利落的在控制台敲入启动命令，各种错误让你的内心开始凌乱了，连抠头的勇气也没有。类似这种烧时间，烧脑，还少头发的情况屡见不鲜。作为一个码农，不偷懒就只能加班。所以，对于多个vue项目，可以将多个项目揉在一起，抽离公共的组件，静态资源。每个项目独立打包。这篇文章简单介绍一下如何对在官方的vue脚手架提供的单文件模板项目改成多个项目的
第一步：改造模板项目目录结构
首先将官方单文件模板的目录结构进行一个简单的改造：
在src 目录下创建一个projects（或者modules）文件夹用来放置你的项目（模块），例如有两个项目projectA,projectB。将原先的入口文件main.js 以及根组件App.vue, 以及路由模块都放置到对应的项目文件夹下。然后根目录中的模板文件index.html 也分别移动到对应的项目中。
第二步：创建配置文件
在模板项目根目录下的config文件夹中创建四个js文件 build.js、build-all.js、dev.js、projectConfig.js 。如图示：
在模板项目中，在控制台输入 npm run dev 就会启动当前的项目，以此进行开发的调试。但是现在是多项目，因此需要实现在控制台输入npm run dev projectA 就启动projectA 项目， npm run dev projectB 就启动 projectB 项目，npm run dev 启动一个默认项目。也就是根据运行命令动态的改变webpack 的配置。projectConfig.js 文件就是根据控制台命令动态生成当前运行或者打包的项目的路径，以及项目名称。他返回的是一个对象，包含的是当前项目（模块）的名称，项目（模块）所在目录。代码如图所示：
以projectA 项目为例，假如启动 projectA, 控制台运行npm run dev projectA, projectConfig.js 生成的是{buildPath:"./src/projects/projectA",projectName:"projectA"}; 当然前面说了 运行 npm run dev 需要启动的是一个默认的项目，我们可以在根目录config文件夹下的index.js 添加一个默认的项目配置：
projectConfig.js 中的process.argv[2] 返回的是的命令执行运行时的参数。通过node.js readdirSync 获取 所有项目的名称 然后遍历一个以项目名称为key的复杂对象，这样就可以通过参数来获取当前运行的项目的参数了。
第三步：编写运行以及打包脚本
运行脚本就是config文件夹下的的dev.js, 在该脚本中引入projectConfig.js 返回的配置对象并将其projectName，以及buildPath赋值给 node.js 环境变量process.env 。其实也可以用node.js 全局变量 global 去存储，或者用js文件存储也是一样的。然后执行另外一个命令,npm run d。 实际上真正的启动调试的命令是这个 d 命令，也就是vue 脚手架默认的开发调试启动命令。dev.js 代码如图示：
这里也要对控制台命令行的脚本修改一下，将根目录下package.json 改成如下图所示：
同理，运行打包运行本地调试的原理相似，只是执行命令不一样，因此config文件夹下面的 build.js build-all.js 与dev.js 也是相似。build.js 代码和dev.js 唯一不同的是最后一行 修改成
build-all.js 就是执行循环打包命令,代码如图所示：
第五步：修改运行以及打包配置文件
vue官方模板项目中，入口文件main.js的路径配置是一个固定的，所以首先要将入口文件改成一个变化的，我们将webpack.base.conf.jss 做如下修改：
其次就是调试时，和打包的配置文件修改，将webpack.dev.conf.js以及webpack.build.conf.js 文件 中的渲染模板的路径也进行如下修改：
最后就是打包的路径配置修改，将config文件夹下的index.js 中的打包相关配置做如下修改：
小结：
本文只是简单的一个vue 多项目的一个配置方案，并不是非常完美，其中有很多地方都可以优化，至少我在写完之后就已经想到可以改进的地方，其中有很多重复，另外改动的地方也比较多。如果不想改动这么多的地方，尤其是不想修改执行的脚本命令，我的建议是将新建的 dev.js，build.js 直直接在模板默认的命令脚本的文件中引入并执行。会省下很多代码。
另外一个就是，没有对static 静态文件的打包配置进行优化，因此运行打包之后，dist文件下的每一个项目中都会包含static中的静态文件，会浪费远程机器硬盘空间。
参考文章：vue+webpack多个项目共用组件动态打包单个项目 - 简书
附上源码：项目参考
