vue配置不同命令区分测试环境和生产环境

在项目开发过程中，往往会区分出测试环境和线上环境，看到教程帖子后在这里记录一下在使用vue进行开发的时候通过不同的打包指令区分测试和线上环境。

首先我们需要安装cross-env

npm i --save-dev cross-env

然后修改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",
    "build": "node build/build.js",
    // 下面的test和prod是新添加的命令
    "test": "cross-env NODE_ENV=production env_config=test node build/build.js",
    "prod": "cross-env NODE_ENV=production env_config=prod node build/build.js"
  }

test和prod就是对应的测试和正式环境

然后在config文件夹下创建test.env.js和prod.env.js文件,代码如下

test.env.js

'use strict'
module.exports = {
  NODE_ENV: '"testing"',
  EVN_CONFIG: '"test"',
  BASE_API: '"https://rel-xxxx.com"'  //测试环境api
}

prod.env.js

'use strict'
module.exports = {
  NODE_ENV: '"production"',
  EVN_CONFIG: '"prod"',
  BASE_API: '"https://xxxx.com"'	//正式环境api

然后修改config里的index文件，把prod,test添加到build参数

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

然后修改webpackage.prod.conf.js

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

最后修改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()
......

到这里就已经全部配置完成了,比如我项目中使用axios来进行数据请求，在创建axios实例的时候配置

// 创建 axios 实例
const service = axios.create({
  baseURL: process.env.BASE_API, // api 的 base_url
  timeout: 40000 // 请求超时时间
})

执行npm run test ==> 测试环境
执行npm run prod ==> 生产环境

参考博文：https://www.cnblogs.com/woshidouzia/p/9345706.html