vue-cli 创建的项目支持多个构建目标

[jiangshanmeta]

最近接手了一个祖传项目，对C的前端项目拆分成了两个项目，PC和M。这两个项目可以说业务逻辑是完全一致，只是展现形式的不同。作为两个项目，这意味着同样的业务逻辑其实是被实现了两遍，这使得维护成本很高，于是我便动了合并两个项目的心思。

新项目依然是基于vue-cli创建的，毕竟我也不想从头开始搞webpakc配置。虽然是要合并成一个项目，但是依然要保证两个独立的入口，而不是vue-cli默认的只有一个入口(目测这就是祖传项目是两个独立项目的原因)。这就用到了vue-cli提供的模式。

为了区分两种不同的模式，需要两个.env文件: .env.pc .env.m。

.env.m文件内容如下

mode=m

其他三个文件类似，mode是为了区分m和pc的。

相应的在package.json中的scripts也要修改：

scripts:{
    "serve:pc": "vue-cli-service serve --mode pc",
    "serve:m": "vue-cli-service serve --mode m",
    "build": "npm run build:pc && npm run build:m",
    "build:pc": "vue-cli-service build --mode pc",
    "build:m": "vue-cli-service build --mode m"
}

接下来我们要改造的是vue.config.js文件

// 获取运行的模式
const mode = process.env.mode || 'pc';
// 根据跑的是否是build 决定NODE_ENV
process.env.NODE_ENV = process.argv[2] === 'build'? 'production':'development';

const configByMode = {
    pc: {
        // 输出
        outputDir: '../static/p',
       // public目录的地址 vue-cli会直接拷贝
        publicDir: 'public/pc',
        // 入口html的路径
        htmlDir: 'public/pc/index.html',
       // 入口js的路径
        entry: './src/main-pc.js',
    },
    m: {
        outputDir: '../static/m',
        publicDir: 'public/m',
        htmlDir: 'public/m/index.html',
        entry: './src/main-m.js',
    },
};
const curConfig = configByMode[mode];

module.exports = {
    lintOnSave: false,
    outputDir: curConfig.outputDir,
    publicPath: './',
    chainWebpack: config => {
        // 配置copy-webpack-plugin
        config
            .plugin('copy')
            .tap((args) => {
                args[0][0].from = curConfig.publicDir;
                return args;
            })
            .end()
            // 配置html-webpack-plugin
            .plugin('html')
            .tap(args => {
                args[0].template = curConfig.htmlDir;
                return args;
            })
            .end();
    },
    configureWebpack (config) {
      // 入口文件
        config.entry.app = curConfig.entry;
    },
};