使用场景：git地址 ：https://github.com/liuguangqing/mult_vue_h5#build-setup
在我们开发h5的时候有时候发布的时候会遇到前端相互独立的活动类h5开发，而这些H5的一些基础配置以及一些公用组件和用户接口都是一模一样的，
当量多的时候，如果每次都init一个新的项目，把之前的公用代码copy过去，这样的话就会造成代码雍俞。
此文章是vue-cli 2.* 版本打包 如果需要vue-cli 3.*多目录配置配置 请移步
我们现在可以用一个vue-cli 去管理多个相同的项目
我们希望的是在电脑上安装了一次依赖 直接去运行多个项目1、项目2、项目3 的时候 可以：
npm run dev project1
npm run dev project2
...打包
npm run build project1
npm run build project2
...就可以分别运行我们的项目
我们先创建一个简单的Vue-cli @2.*
一、配置项目
1、修改 config/index.js
module.exports = {} 上面增加如下代码：（获取输入的命令的目录名称）
const projectDir = process.argv[process.argv.length - 1].replace(/^(S)*=/, '')
if(!projectDir){
console.log('> 项目名称不能为空')
return;
}module.exports = {} 中找到 build 节点中的 index assetsRoot 修改如下代码：（打包 dist/project/...）
index: path.resolve(__dirname, '../dist/'+ projectDir + '/' +'index.html'),
assetsRoot: path.resolve(__dirname, '../dist/'+ projectDir ),2、修改build/webpack.base.conf.js
module.exports = {} 上面增加如下代码：（获取输入的命令的目录名称）
const projectDir = process.argv[process.argv.length - 1].replace(/^(S)*=/, '')
if(!projectDir){
console.log('> 项目名称不能为空')
return;
}module.exports = {} 中找到 entry 节点中的 app 修改如下：（修改入口文件路径）
entry: {
// app: './src/main.js'
//**入口文件**
app: './src/'+ projectDir + '/main.js'
},resolve 节点中的 alias 修改如下 （修改 组件之间相互引用时的路径）
alias: {
'vue$': 'vue/dist/vue.esm.js',
// '@': resolve('src'),
'@': resolve('src/'+ projectDir)
}3、修改build/webpack.prod.conf.js
const webpackConfig = merge(baseWebpackConfig, {} 上面增加如下代码：（获取输入的命令的目录名称）
const projectDir = process.argv[process.argv.length - 1].replace(/^(S)*=/, '')
if(!projectDir){
console.log('> 项目名称不能为空')
return;
}找到 new HtmlWebpackPlugin({}) 修改 template 值如下： （html模板所在的文件路径）
template: 'src/'+ projectDir +'/index.html',4、修改build/webpack.dev.conf.js
const devWebpackConfig = merge(baseWebpackConfig, {} 上面增加如下代码：（获取输入的命令的目录名称）
const projectDir = process.argv[process.argv.length - 1].replace(/^(S)*=/, '')
if(!projectDir){
console.log('> 项目名称不能为空')
return;
}找到 new HtmlWebpackPlugin({}) 修改 template 值如下： （html模板所在的文件路径）
template: 'src/'+ projectDir +'/index.html',5、创建文件 build/devServer.js 内容如下： （运行cmd命令文件）
const cprocess = require('child_process')
let entryDir = process.argv[process.argv.length-1]
let cmd = 'npm run startdev -- --env.name=' + entryDir
let dev = cprocess.exec(cmd, {detached: true} ,function(error, stdout, stderr) {
if(error) console.log(error)
})
dev.stdout.pipe(process.stdout)
dev.stderr.pipe(process.stderr)6、修改 package.json 文件 找到 scripts 节点 修改如下：（修改 npm 运行脚本）
"scripts": {
"dev": "node build/devServer.js",
"startdev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
"start": "npm run dev",
"build": "node build/build.js"
},二、修改目录结构
1、在src 目录下创建项目目录 比如 project1
2、把原有项目中的App.vue、index.html、main.js文件和 router、assets、components目录全部移动到 该项目文件夹下
至此完成：
## 目录结构
├── build
│ ├── devServer.js // cmd运行文件
│ ├── base.conf.js // 开发环境
│ ├── prod.conf.js // 线上环境
│ └── build.js // 打包入口文件
├── config // 配置文件
│ ├── index.js // 配置打包
├── dist // 打包好的资源
├── src // 入口
│ ├── common // 公共组件
│ ├── projects1 // 项目入口文件
│ ├── projects2 // 公共资源文件
│ │ ├──assets // 插件文件
│ │ ├──components // 组件
│ │ ├──page // 页面
│ │ ├──store // vuex
│ │ ├──router // 路由
│ │ ├──App.vue // 入口
│ │ ├──index.html // html文件
│ │ └──main.js // main配置
│ ├── ...
├── static // 静态文件
├── package.json // webpack三、使用命令
和平时一样命令 在后面 加上你的项目文件夹的名字即可
npm run dev project1
npm run build project1
