vue如何根據(jù)環(huán)境配置接口地址？

最近一直在學(xué)習(xí)vue.js，之前使用vue用的是js引入，沒有用到打包?，F(xiàn)在想學(xué)習(xí)使用vue webpack這種開發(fā)模式寫一個(gè)小demo，在此之前查詢過很多資料，也閱讀過一些大神的博客，但是還是對一些問題不是很清楚，具體問題如下：

1.npm run ruild后將打包后的靜態(tài)文件放到線上服務(wù)器，那么咱們在開發(fā)后要放到測試服務(wù)器的也是打包后的dist文件嗎？

2.關(guān)于不同環(huán)境的接口地址問題：由于公司在測試過程中分為不同的環(huán)境（pre fix），本地開發(fā)的時(shí)候是在pre環(huán)境，那么在接口調(diào)用的時(shí)候地址該怎能么配置呢？看到有的大神回答是在webpack.prod.conf.js和 webpack.dev.conf.js中配置后直接調(diào)用就行

生產(chǎn)環(huán)境：webpack.prod.conf.js
module.exports ={

 // ...
 plugins: [
    new webpack.DefinePlugin({
        'process.env': env,
        'BASE_URL': '"http://api.xxx.com:8080"'
    })
  ],
 // ...

}

開發(fā)環(huán)境：webpack.dev.conf.js
module.exports ={

 // ...
 plugins: [
    new webpack.DefinePlugin({
        'process.env': env,
        'BASE_URL': '"http://test.api.xxx.com:8080"'
    })
  ],
 // ...

}

使用：
this.$http.get(BASE_URL + '/getData', function(data) {});

有個(gè)疑問就是，在測試環(huán)境（pre）域名應(yīng)該是pre.xxx.com，test環(huán)境域名應(yīng)該是test.xxx.com，光測試環(huán)境就兩個(gè)域名，這樣該怎么配置呢？

3.如何分環(huán)境進(jìn)行打包？npm run build打包命令是在所有環(huán)境都用這個(gè)嘛？能不能在不同的環(huán)境使用不同的打包命令，比如我說的在測試環(huán)境npm run build:pre npm run build:fix這樣的？對于這個(gè)分環(huán)境打包的疑惑其實(shí)還是來源于第二條的接口地址在不同環(huán)境的配置問題。

以上是我在學(xué)習(xí)過程中遇到的問題，可能在大神們看來這些問題比較弱智，但是確實(shí)是困擾著我，還請大佬們指點(diǎn)一下子，感激......

回答

編輯回答

拽很帥

不同的測試環(huán)境？什么意思，比如舉個(gè)例子呢。用nginx可以配置不同的域名。

2018年8月10日 17:21

編輯回答

大濕胸

個(gè)人使用的一個(gè)方案：在axios配置里面，判斷域名

if (location.hostname == '正式的域名') { 
  baseUrl = '正式地址'
 } else { //測試環(huán)境
  baseUrl = '測試地址'
}

axios.defaults.baseURL = baseUrl

2018年3月26日 11:48

編輯回答

小曖昧

以webpack為例子，在package.json 安裝這個(gè)插件

"dependencies": {
    "generate-asset-webpack-plugin": "^0.3.0"
  },

然后再webpack.prod.conf.js 里面上面加入

// 讓打包的時(shí)候輸出可配置的文件
var GenerateAssetPlugin = require('generate-asset-webpack-plugin')
var createServerConfig = function (compilation) {
  let cfgJson = {ApiUrl: '你的地址,可以設(shè)置默認(rèn)的生產(chǎn)環(huán)境地址'}
  return JSON.stringify(cfgJson)
}
然后再plugins中加入
 new GenerateAssetPlugin({
      filename: 'config.json',
      fn: (compilation, cb) => {
        cb(null, createServerConfig(compilation))
      },
      extraFiles: []
    })
    這個(gè)插件

config.json是打包后會在dist中生成的文件,可在這里隨意配置api接口網(wǎng)址
下面配置跟你的一樣

生產(chǎn)環(huán)境：webpack.prod.conf.js
module.exports ={

 // ...
 plugins: [
    new webpack.DefinePlugin({
        'process.env': env,
        'BASE_URL': '"http://api.xxx.com:8080"'
    })
  ],
 // ...
}

開發(fā)環(huán)境：webpack.dev.conf.js
module.exports ={

 // ...
 plugins: [
    new webpack.DefinePlugin({
        'process.env': env,
        'BASE_URL': '"http://test.api.xxx.com:8080"'
    })
  ],
 // ...
}

獲取api方式,在main.js里面用異步請求方式,比如下面ajax

localStorage.setItem('apiUrl', process.env. BASE_URL)
if (process.env.NODE_ENV == 'production') {
  $.ajax({
    url: 'config.json',
    type: 'GET',
    async: false,
    dataType: 'json',
    cache: false,
    success: function (data, textStatus, jqXHR) {
      if (data.ApiUrl) {
        localStorage.setItem('apiUrl', data.ApiUrl)
      }
    },
    error: function (xhr, textStatus) {
    }
  })
}

這里可以判斷是生產(chǎn)環(huán)境還是開發(fā)環(huán)境,如果是開發(fā)環(huán)境,不會讀取config.json里面的地址,會讀取你dev里面的base_url
最后你就可以在任何地方用下面方式獲取地址了
`
localStorage.getItem('apiUrl')
`

2018年3月25日 02:29

編輯回答