vue項目在不同環境下請求不同接口地址

在vue-cli2的版本中,在項目的目錄下有config文件夾,config文件夾裏面有dev.env.js和prod.env.js文件,dev.env.js是開發環境的配置文件,prod.env.js是生產環境的配置文件

在dev.env.js文件中配置開發環境的接口

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

module.exports = merge(prodEnv, {
  NODE_ENV: '"development"',
  API_HOST:'"/api/"'//這個是開發環境訪問的接口,這裏我使用了服務器代理(/api),因爲axios是跨越的
})

在prod.env.js中配置生產環境的接口

'use strict'
module.exports = {
  NODE_ENV: '"production"',
  API_HOST:'"http://192.168.43.94:8080/"'//這個是項目打包後訪問的接口
}

調用axiso請求接口的時候就可以使用   process.env.API_HOST(API_HOST是在dev.env.js和prod.env.js定義的一個變量名)訪問接口,比如

let url =process.env.API_HOST + "xxxx/xxxxx";

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章