Vue-cli 多项目管理

痛点

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