vue-cli2前端打包不同环境

一、先安装依赖

​​npm install --save-dev cross-env

二、在config.js下面新增环境

在config.js下面新增一个测试环境 test.env.js

prod.env.js内容如下：

module.exports = {
    NODE_ENV: '"production"',
    ENV_CONFIG: '"prod"',
  };

test.env.js内容如下：

module.exports = {
    NODE_ENV: '"testing"',
    ENV_CONFIG: '"test"',
  };

三：修改config文件夹下的index.js

找到build对象在里面添加

 prodEnv: require('./prod.env'),
 testEnv: require('./test.env'),
 devEnv: require('./dev.env'),
 // Template for index.html
 index: path.resolve(__dirname, '../dist/index.html'),

四、修改build文件夹下面的build.js

const spinner = ora('正在打包... ' + process.env.ENV_CONFIG + '环境')

这样打包时候可以知道用的哪个环境

五、修改build文件夹下面的webpack.prod.conf.js

//将原来的 const env = require('../config/prod.env')
//改变成下面的
const env = config.build[process.env.env_config+'Env']

六、修改package.json

  "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
  "start": "npm run dev",
  "build": "cross-env NODE_ENV=production ENV_CONFIG=prod node build/build.js",
  "build:test": "cross-env NODE_ENV=testing ENV_CONFIG=test node build/build.js",

最后就可以了。