vue-cli根据不同环境打包

以下为项目需求：

1.不同命令打包不同环境包
2.不同环境的包统一放到dist目录下，并做区分

以下为详细步骤：

1.修改package.json中的scripts，添加命令执行对应的build文件

"scripts": {
    "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js --host 0.0.0.0",
    "start": "npm run dev",
    "lint": "eslint --ext .js,.vue src",
    "build": "node build/build.js", //生产环境
    "build:mraw": "node build/build.mraw.js" //预生产环境
  },

2.找到config目录下prod.env.js，复制一份更名为mraw.env.js,并做如下修改：

'use strict'
module.exports = {
    NODE_ENV: '"mraw"'
}

3.找到build目录下webpack.prod.conf.js，复制一份改名为webpack.mraw.conf.js,并修改如下代码

const env = require('../config/mraw.env')

4.找到build目录下build.js，复制一份，并改名为build.mraw.js,并修改如下代码

//修改此处名称为预生产
process.env.NODE_ENV = 'mraw'
//引入预生产配置文件
const webpackConfig = require('./webpack.mraw.conf')

5.对webpack.base.conf.js文件做如下修改

output: {
    path: config.build.assetsRoot,
    filename: '[name].js',
    //非开发环境，文件都按生产环境公共路径打包
    publicPath: process.env.NODE_ENV === 'development'
      ? config.dev.assetsPublicPath
      : config.build.assetsPublicPath
  }

6.最后修改config目录下index.js文件，如下

//添加如下代码：
const processEnv = process.env.NODE_ENV;
let buildFolder; //打包后的文件夹名称
if (processEnv == 'production') {
  buildFolder = 'www';
}  else (processEnv == 'mraw'){
  buildFolder = 'mraw';
}

//修改如下代码：
build: {

    // Template for index.html
    >>>>>>>>>>>>此处做了修改
    index: path.resolve(__dirname, `../dist/${buildFolder}/index.html`),  

    // Paths
    >>>>>>>>>>>>此处做了修改
    assetsRoot: path.resolve(__dirname, `../dist/${buildFolder}`), 


    assetsSubDirectory: 'static',


    >>>>>>>>>>>>此处做了修改
    assetsPublicPath: './', 


    /**
     * Source Maps
     */

    productionSourceMap: true,
    // https://webpack.js.org/configuration/devtool/#production
    devtool: '#source-map',

    // Gzip off by default as many popular static hosts such as
    // Surge or Netlify already gzip all static assets for you.
    // Before setting to `true`, make sure to:
    // npm install --save-dev compression-webpack-plugin
    productionGzip: false,
    productionGzipExtensions: ['js', 'css'],

    // Run the build command with an extra argument to
    // View the bundle analyzer report after build finishes:
    // `npm run build --report`
    // Set to `true` or `false` to always turn it on or off
    bundleAnalyzerReport: process.env.npm_config_report
  }

如果有多环境，按此方法增加文件和命令，笔者初学,自行摸索而来，还望高人指点更好的解决方案。

最后编辑于：2018.03.07 17:47:04