Vue 多環境配置方法

開發應用時環境有開發環境、測試環境、生產環境等,此時我們需要配置不同的環境,獲取不同的apiUrl前綴，避免了頻繁手動更改api.

1.安裝cross-env插件

cross-env是跨平台設置和使用環境變量的腳本。
在大多數Windows命令行中在使用NODE_ENV = production設置環境變量時會報錯。同樣，Windows和Linux命令如何設置環境變量也有所不同。 使用cross-env可以設置在不同的平台上有相同的NODE_ENV參數。

npm install cross-env --save-dev

2.修改package.json的scripts

通過cross-env跨平台地設置環境變量（可以根據自己需求多定義幾個環境）

  "scripts": {
    "dev": "cross-env NODE_PACK=development webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
    "start": "npm run dev",
    "build": "cross-env NODE_PACK=production node build/build.js"
  },

3.config文件下新建api.js文件

通過process.env.NODE_PACK獲取到自定義的環境變量，獲取對應環境的API

// 根據環境設置 BASE_API
let apiUrl = '';
switch(process.env.NODE_PACK) {
  case 'production':
    apiUrl = '"https://it.bkjk.cn"';
    break;
  .......
  default:
    apiUrl = '"http://127.0.0.1:8000"';
    break;
}
module.exports = apiUrl;

4.更改config下的dev.env.js和prod.env.js

dev.env.js

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

module.exports = merge(prodEnv, {
  NODE_ENV: '"development"',
  BASE_API : apiUrl
})

prod.env.js

'use strict'
const apiUrl = require('./api')

module.exports = {
  NODE_ENV: '"production"',
  BASE_API : apiUrl
}

5.utils下的request.js

添加baseURL: process.env.BASE_API后src/api/api.js的接口只用后綴就行，會自動和baseURL拼接，/也可省略

// 創建axios實例
const service = axios.create({
  baseURL: process.env.BASE_API, // api 的 base_url
  timeout: 5000, // 請求超時時間
})