前言

由于每个环境都有一些不通信息，每次都替换修改挺麻烦的，所以使用不通的命令打包不通的环境编译包是一个不错的选择。

config/env.js 里面写每个环境的专有信息，通过命令区分不通环境，到该文件读取不通的配置信息，从而编译出不同环境的包

• 需要修改的文件列表

  
  文件列表

根据打包命令编译出不通环境的包

• node执行命令添加模块

npm install vue-axios -save-dev
npm install --save axios vue-axios
npm install cross-env -save-dev

• 修改package.json

  "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:dev": "cross-env NODE_ENV=development env_config=dev node build/build.js",
    "build:test": "cross-env NODE_ENV=testing env_config=test node build/build.js",
    "build:pre": "cross-env NODE_ENV=pre env_config=pre node build/build.js",
    "build:prod": "cross-env NODE_ENV=production env_config=prod node build/build.js"
  },

修改前后对比

• 修改build/build.js

'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()

修改前后对比

• 修改build/webpack.prod.conf.js

// 注释并添加下面一行，切换环境
// const env = process.env.NODE_ENV === 'testing'
//   ? require('../config/test.env')
//   : require('../config/prod.env')

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

修改前后对比

• 修改config/dev.env.js

'use strict'
const merge = require('webpack-merge')
const prodEnv = require('./prod.env')

module.exports = merge(prodEnv, {
  NODE_ENV: '"development"',
  ENV_CONFIG: '"dev"',
  url_api: '""'
})

修改前后对比

• 修改配置文件config/index.js

  build: {
    // 根据环境部署
    prodEnv: require('./prod.env'),
    devEnv: require('./dev.env'),
    preEnv: require('./pre.env'),
    testEnv: require('./test.env'),
    // Template for index.html

修改前后对比

• 添加预发布环境配置config/pre.env.js

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

• 修改线上环境配置文件 config/prod.env.js

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

修改前后对比

• 修改配置文件 config/test.env.js

'use strict'
const merge = require('webpack-merge')
const devEnv = require('./dev.env')

module.exports = merge(devEnv, {
  NODE_ENV: '"testing"',
  ENV_CONFIG: '"test"'
})

• 添加配置文件config/env.js

import Vue from 'vue'
import Axios from 'axios'
import VueAxios from 'vue-axios'

Vue.use(VueAxios, Axios)
/*
 * 配置编译环境和线上环境之间的切换
 * baseUrl: 域名地址
 * routerMode: 路由模式
 */
let baseUrl = ''
let routerMode = 'history'
let DEBUG = false
let cancleHTTP = [] // 取消请求头设置；
// 注：下面的baseUrl地址为假地址，只是模拟的，无法调通。
// eslint-disable-next-line eqeqeq
if (process.env.NODE_ENV == 'development') {
  Axios.defaults.baseURL = 'api'
  DEBUG = true
// eslint-disable-next-line eqeqeq
} else if (process.env.NODE_ENV == 'production') {
  Axios.defaults.baseURL = 'api'
// eslint-disable-next-line eqeqeq
} else if (process.env.NODE_ENV == 'testing') {
  Axios.defaults.baseURL = 'api'
// eslint-disable-next-line eqeqeq
} else if (process.env.NODE_ENV == 'pre') {
  Axios.defaults.baseURL = 'api'
}

export {
  baseUrl,
  routerMode,
  DEBUG,
  // eslint-disable-next-line no-undef
  ROLE,
  cancleHTTP
}

• 修改配置文件src/main.js

import Vue from 'vue'
import App from './App'
import router from './router'

import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import '../config/env'
import Axios from 'axios'
import VueAxios from 'vue-axios'

Vue.use(VueAxios, Axios)
// Axios.defaults.baseURL = process.env.url_api
Axios.defaults.baseURL = 'api'
Vue.use(ElementUI)

console.log(process.env.NODE_ENV)
Vue.config.productionTip = false
// eslint-disable-next-line no-new
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

修改前后对比

根据环境部署

···
node run build:dev
node run build:test
node run build:pre
node run build:prod
···