痛点
vue-cli 这个脚手架真的很方便好用，但是它是相对于单项目应用里的，那么今天将其的配置稍稍修改，改造为简单的对项目管理。这样项目之间的组件就可以轻松复用。
主要目录结构
.
|-- build // 项目构建(webpack)相关代码
|-- config // 项目开发环境配置
|-- dist // 产出目录
| |-- project1 // 项目1
| |-- static // 项目1-压缩静态文件
| |-- index.html // 项目1-压缩入口html
| |-- project2 // 项目2
| |-- project3 // 项目3
|-- src // 源码目录
| |-- project1 // 项目1
| |-- components // 项目1-vue公共组件
| |-- store // 项目1-vuex的状态管理
| |-- App.vue // 项目1-页面入口文件
| |-- main.js // 项目1-程序入口文件，加载各种公共组件
| |-- index.html // 项目1-模板入口文件
| |-- project2 // 项目2
| |-- project3 // 项目3
.
主要原理
在文件夹src添加好写好的项目代后，利用npm run dev/npm run build命令时执行的build/build.js && build/dev-server.js 获取项目命令，获取需要编译的项目名，放在node的global公共变量中，再修改webpack的打包工具，进行配置响应的项目目录。
修改
build/build.js && build/dev-server.js 开头处添加
// **获取项目名称**
var args = process.argv.slice(2)[0];
if( !args ){
console.log('> 温馨提示：项目名称不能为空 ')
console.log('> npm run dev (project name)')
return;
}
global.APP_PROJECT_NAME = args;
webpack.base.conf.js
module.exports = {
entry: {
//**入口文件**
app: './src/'+ global.APP_PROJECT_NAME + '/' +'main.js'
},
... ...
resolve: {
extensions: ['.js', '.vue', '.json'],
alias: {
'vue$': 'vue/dist/vue.esm.js',
// **别名修改**
'@': resolve('src/'+ global.APP_PROJECT_NAME)
}
},
module: {
rules: [
{
test: /\.(js|vue)$/,
loader: 'eslint-loader',
enforce: 'pre',
// **修改vue、js规则**
include: [resolve('src/'+ global.APP_PROJECT_NAME), resolve('test')],
options: {
formatter: require('eslint-friendly-formatter')
}
},
... ...
}
]
}
}
webpack.dev.conf.js
new HtmlWebpackPlugin({
filename: 'index.html',
// **修改开发模式入口模板html文件**
template: 'src/' + global.APP_PROJECT_NAME +'/' +'index.html',
inject: true
}),
config/index.js
new HtmlWebpackPlugin({
filename: config.build.index,
//**修改产出模式入口模板html文件**
template: 'src/'+ global.APP_PROJECT_NAME +'/'+ 'index.html',
inject: true,
... ...
}),
webpack.prod.conf.js
module.exports = {
build: {
env: require('./prod.env'),
//产出html目录修改
index: path.resolve(__dirname, '../dist/'+ global.APP_PROJECT_NAME + '/' +'index.html'),
//产出js、css目录修改
assetsRoot: path.resolve(__dirname, '../dist/'+ global.APP_PROJECT_NAME ),
assetsSubDirectory: 'static',
... ...
},
dev: {
... ...
}
}
命令
和往常一样就可以了,加上你的项目文件夹的名字
$npm run dev project1
$npm run build project1
