恩~~~開發環境和生產環境接口往往不同~
開發環境+生產環境,開發環境就是在 /config/index.js下配置proxyTable 。
這裏簡單貼一下代碼,不多講。
proxyTable: {
'/api': { //將www.exaple.com印射爲/apis
target: 'https://xxx', // 接口域名
changeOrigin: true, //是否跨域
pathRewrite: {
'^/api': '' //需要rewrite的,
},
secure: false,
headers: {
Referer: 'https://xxx'
}
}
},
主要講一下生產環境的問題。貌似是因爲打包項目後代理就失效啦,所以再生產環境下要重新配置一下。網上的方案有很多種,這裏就講一種我個人覺得還是挺不錯滴,生產和開發環境自動識別切換的一種配置方式。
(1)再config/dev.env.js下配置開發環境的API_ROOT
'use strict'
const merge = require('webpack-merge')
const prodEnv = require('./prod.env')
module.exports = merge(prodEnv, {
NODE_ENV: '"development"',
API_ROOT: '"/api"' //這是新增的代碼
})
(2)再config/prod.env.js下配置生產環境的API_ROOT
'use strict'
module.exports = {
NODE_ENV: '"production"',
API_ROOT: '"https://xxx/"' //這是新增的代碼
}
(3)在需要調用的地方
export const evidence_url = process.env.API_ROOT + '/' + '';
//process.env.API_ROOT 根據不同的環境會返回給你不同的API_ROOT
(4)重啓項目測試沒有問題,打包上傳吧!嘻嘻~
其實個人jue的VUE配置思路還是蠻簡單清晰的,因爲他內部做了封裝,所以我們寫的時候簡化了很多。
小白菜如果有什麼講的地方不正確,不完善的請大佬多多指教~
biu~~~