vue開發中api介面地址區分開發環境和線上環境
阿新 • • 發佈:2019-02-03
相關檔案
/config/dev.env.js // 本地開發配置
/config/prod.env.js // 線上打包配置
修改/config下
的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_ROOT: '"開發環境地址"'
})
prod.env.js
'use strict'
module.exports = {
NODE_ENV: '"production"',
API_ROOT: '"線上地址"'
}
注意
本地開發會用到webpack的代理, 開發環境的api地址已經被代理了, 在/config/index.js
裡面的proxyTable
, 所以線下地址不能寫成你實際的線下地址, 而是要寫成你這裡代理後的地址. 關於vue2.x使用axios以及http-proxy-middleware代理處理跨域的問題
代理處理跨域
在/config/index.js
裡的proxyTable, 現在最新的vue-cli不需要特意安裝外掛了 直接修改這個檔案即可
proxyTable: {
'/apis': { //將www.exaple.com印射為/apis
target: 'https://www.exaple.com', // 介面域名
changeOrigin: true, //是否跨域
pathRewrite: {
'^/apis': '' //需要rewrite的,
}
}
}
使用
最好是把所有的請求都封裝一下, 不管是為了以後修改還是其他什麼
在請求之前拼接地址
const root = process.env.API_ROOT;
這個root就是對應的地址
npm run dev
開發環境會使用dev.env.js
裡的API_ROOT
npm run build
線上環境會使用prod.env.js
裡的API_ROOT
在每個請求的地方
root+'/getlist'
如果沒有封裝的話, 則需在每個***.vue
檔案內
const root = process.env.API_ROOT;
然後使用root+'/getlist'
最後, 配置完要重啟專案, 記住, 每次修改完配置檔案都要重啟專案, 才會看到是否生效
驗證
可以在入口vue檔案內log一下測試
const root = process.env.API_ROOT;
// 然後在created(){}, 這個函式內列印一下root 如果是你設定的 就說明設定成功
有不明白的地方可以留言