vue 中區分測試環境和正式環境

其實很簡單，只要改動四個地方就行，不管你用的是vueResource或者anxios都可以

1.在/config/dev.env.js 和/config/prod.env.js中分別這樣修改

/config/dev.env.js

'use strict'
const merge = require('webpack-merge')
const prodEnv = require('./prod.env')
 
module.exports = merge(prodEnv, {//測試環境域名
  NODE_ENV: '"development"',
  API_ROOT: '"測試環境域名"'
})

 

/config/prod.env.js

'use strict'
module.exports = {//正式環境域名
  NODE_ENV: '"production"',
  API_ROOT: '"正式環境域名"'
 
}

 

2.然后再src目錄下新建一個api/index.js

const root = process.env.API_ROOT;
export default root;
//把你的地址export出去，然后在main.js中全局引用

 

3.在main.js中全局引用

// 引用API文件
import api from './api/index.js'   //切換環境js
// 將API方法綁定到全局
Vue.prototype.$api = api

 

4.在頁面接口中這樣使用

 

 

然后，npm run dev 調的就是測試環境地址

npm run build 調的就是正式環境地址