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這三條命令下列印的結果，如下：