03：2020-11-14 vue不同的api地址生产环境和开发环境配置打包

vue项目里面，通过vue-cli中的npm run build 可对项目进行打包，可是在实际工作中可能有生产环境，测试环境甚至更多，每个环境的请求地址都是不同的，如果我们每次都手动修改请求地址并打包，将非常繁琐，所以我们需要稍微配置一下，可以实现项目不同环境的打包配置

第一种方式

1、首先安装cross-env，命令: npm i --save-dev cross-env;
2、在config文件夹里面新建文件：test.env.js，（文件名自己随便取），格式类似：

'use strict'
module.exports = {
  NODE_ENV: '"testing"',
  EVN_CONFIG:'"test"',
  API_ROOT:'"测试环境接口链接"'
}

3、同样在config文件夹下面修改prod.env.js文件，大概内容如下：

'use strict'
module.exports = {
  NODE_ENV: '"production"',
  EVN_CONFIG:'"prod"',
  API_ROOT:'"生产环境接口链接"'
}

4、同样config文件夹下面修改index.js文件，如下：

build: {
    prodEnv: require('./prod.env'),
    testEnv: require('./test.env'),
    //增加上面两行代码
    // Template for index.html
    index: path.resolve(__dirname, '../dist/index.html')
  }

5、在build文件夹下修改webpack.prod.conf.js文件，如下：

// const env = require('../config/prod.env')
//注释上面一行加上下面一行
const env = config.build[process.env.ENV_CONFIG+'Env']

6、同样在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...') //注释掉
const spinner = ora('building for ' + process.env.NODE_ENV + ' of ' + process.env.ENV_CONFIG+ ' mode...' )//添加这行

7、最后一步，修改package.json文件，如下：

"scripts": {
   "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"
 },

一切都配置好了，我们来做个小实验验证一下，app.vue文件下打印当前环境，如下：

<script>
	export default {
	  mounted(){
	    console.log(process.env)
	  }
	}
</script>

然后我们分别查看npm run dev，npm run build，npm run build–test这三条命令下打印的结果，如下：

API_ROOT换成自己不同环境的接口就行了，然后调用的时候设定axios的默认地址就行了，如下：

axios.defaults.baseURL = process.env.API_ROOT//前提引入了axious

第二种方式(待验证)

一、先配置vue生产环境和开发环境配置不同的api地址，
vue-cli2构建的项目中，有两个文件是用来区分生产环境和开发环境的。
1、在config文件夹里面新建文件：test.env.js 和 pro.env.js
2、在main.js文件中引入static下新建的apiConfig这个JSON文件。

import apiConfig from '../static/apiConfig.json';
apiConfig={
	"api": "apiDevUrl",
	"api2": "apiDev2Url"
}

3、在main.js中添加如下代码：
development是开发环境，production是生产环境。这里我用的是axios（要安装）, Vue.prototype.apiConfig是vue的全局属性

let env = process.env.NODE_ENV;
if (env == 'development') {
  axios.defaults.baseURL = apiConfig.api//测试（）
  Vue.prototype.apiConfig = apiConfig
} else if (env == 'production') {
  axios.defaults.baseURL = apiConfig.api2//生产（）
  Vue.prototype.apiConfig = apiConfig
}

4、然后在组件中使用,可直接打出log，查看当前的api地址：

console.log(this.apiConfig)

二、开始配置不同打包环境命令
1、更改package.josn文件
在package.json文件的script文件下添加"test": “node build/build.js”,

  "scripts": {
    "dev": "node build/dev-server.js",
    "start": "node build/dev-server.js",
    "build": "node build/build.js",
    "test": "node build/build.js",   //添加这一行代码
    "lint": "eslint --ext .js,.vue src"
  },

2、更改config/prod.env.js文件

var targetEvent = process.env.npm_lifecycle_event;
if (targetEvent == 'test') {
  var obj = {
    NODE_ENV: '"development"'
  }
} else if (targetEvent == 'build') {
  var obj = {
    NODE_ENV: '"production"'
  }
}
module.exports = obj;

3. 在main.js文件中添加

//引入api文件
import apiConfig from '../static/apiConfig.json'   //测试api存放的地址
let env = process.env.NODE_ENV;
let apis = "";
if (env == 'development' || env == 'test') {
  apis = apiConfig.api;
} else if (env == 'production') {
  apis = apiConfig.api2;
}

4、开始打包
分别查看npm run dev，npm run build，npm run test这三条命令下打印的结果，如下：