vue根据不同环境进行编译打包

工作中我们在开发过程中，有很多的开发环境，如果我们不进行统一配置，那么我们只能手动进行更改，这样会给我们带来诸多不便，所以我们要配置根据不同的环境来进行编译打包.

先看一下我的项目目录：

在config文件内新建test.env.js文件：

1.

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

修改config内的prod.env.js文件：

2.

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

对build中webpack.prod.conf.js做如下修改：

3.

const env = config.build[process.env.env_config+'Env']

config中的index.js 文件中build部分代码修改如下：

4.

build: {
   prodEnv: require('./prod.env'),
   testEnv: require('./test.env'),
   // Template for index.html
   index: path.resolve(__dirname, '../dist/index.html'),
// ····余下的代码就不写了
}

确认安装cross-env

5.

npm install cross-env –save-dev

对build文件夹下的build.js的修改：

6.

'use strict'
require('./check-versions')()
 
// process.env.NODE_ENV = 'production'   //注释掉
 
const ora = require('ora')
const rm = require('rimraf')
const path = require('path')
const chalk = require('chalk')
const webpack = require('webpack')
const config = require('../config')
const webpackConfig = require('./webpack.prod.conf')
 
// const spinner = ora('building for production...')   //注释掉
var spinner = ora('building for ' + process.env.NODE_ENV + ' of ' + process.env.env_config+ ' mode...' )
 
spinner.start()

修改package.json文件（在script里面添加）：

7.

"scripts": {
  "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
  "start": "npm run dev",
  "unit": "jest --config test/unit/jest.conf.js --coverage",
  "e2e": "node test/e2e/runner.js",
  "test": "npm run unit && npm run e2e",
  "lint": "eslint --ext .js,.vue src test/unit test/e2e/specs",
  "build": "node build/build.js",
  "build--test": "cross-env NODE_ENV=testing env_config=test node build/build.js",
  "build--prod": "cross-env NODE_ENV=production env_config=prod node build/build.js"
},

在utils文件下新建env.js，对环境进行判断并切换，内容如下：

8.

/*
 * 配置编译环境和线上环境之间的切换
 * baseUrl: 域名地址
 * routerMode: 路由模式
 */
let baseUrl = '';
let routerMode = 'history';
let DEBUG = false;
let cancleHTTP = [];//取消请求头设置；
//注：下面的baseUrl地址为假地址，只是模拟的，无法调通。
if (process.env.NODE_ENV == 'development') {
   baseUrl = "https://10.248.65.100/GetTravelMethod";
   DEBUG = true;
}else if(process.env.NODE_ENV == 'production'){
   baseUrl = "https://10.248.65.200/GetTravelMethod";
   DEBUG = false;
}else if(process.env.NODE_ENV == 'testing'){
   baseUrl = "https://10.248.65.150/GetTravelMethod";
   DEBUG = false;
}
 
export{
   baseUrl,
   routerMode,
   DEBUG,
   ROLE,
   cancleHTTP
}
在拦截器中配置

test环境下则运行：

9.

npm run build--test

production环境则运行：

10.

npm run build--prod

好了，这就是配置步骤了。