vue cli腳手架項目利用webpack給生產環境和發布環境配置不同的接口地址或者不同的變量值。

廢話不多說，直接進入正題，此文以配置不同的接口域名地址為例子

項目根目錄下有一個config文件夾，基礎項目的話里面至少包括三個文件，

1.dev.env.js

2.index.js

3.prod.env.js

我們需要做配置的就是第一個和第三個。

其實這兩個文件內容就是針對生產環境和發布環境設置不同的參數的文件，那么打開dev.en.js，開發環境。原本代碼如下：

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

module.exports = merge(prodEnv, {
  NODE_ENV: ‘"development"‘,
})　　

然后我們配置一個BASE_API,在頁面上加一行代碼，如下

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

module.exports = merge(prodEnv, {
  NODE_ENV: ‘"development"‘,
  BASE_API: ‘"https://www.baidu.com"‘,
})

然后，我們編輯prod.env.js文件，生產環境，原本代碼如下

‘use strict‘
module.exports = {
  NODE_ENV: ‘"production"‘,
}　　

在此文件基礎上，加一行代碼，更改后如下

‘use strict‘
module.exports = {
  NODE_ENV: ‘"production"‘,
  BASE_API: ‘"https://www.baidu.com"‘,
}　　

最后，

// 配置API接口地址
var root = process.env.BASE_API　　

這個時候root就是公用的base變量了，可以直接訪問接口的時候這樣寫：root+"api/home"　而且這個變量會根據環境 自動發生調整，打包的時候 會自動改成線上地址。

也可以在main.js里對這個變量進行全局配置。

Vue.prototype.$URL = process.env.BASE_API;