區(qū)分環(huán)境
一般是配置 .env .env.production 等。
默認(rèn)配置就是用.env
示例：
VUE_APP_SRV = http://xxxxx/api
NODE_ENV='local'
封裝下base_url
為啥要封裝，因為開發(fā)模式需要proxy代理。。而線上模式不需要。
export function baseUrl() {
return process.env.NODE_ENV === 'development' ? '/dev-api' : process.env.VUE_APP_SRV;
}
/dev-api 只要不和web里的path 沖突就行，也可以取其他名字。
axios 區(qū)分配置
開發(fā)模式 就是web的路徑，再加個特殊的path 用作代理。
其他模式 不需要proxy配置，直接走api
const fetch = Axios.create({
baseURL: baseUrl(),
// baseURL: '/dev-api',
timeout: 30000
});
其他注意事項
驗證碼和文件上傳的url 一般就是寫在組件里的。并不是用的axios, 但也會走proxy。
此時直接引用 上面封裝的baseUrl 就行。。
有時候會忘記，直接用了process.env.VUE_APP_SRV 導(dǎo)致驗證碼老通不過。因為不是一個域名。
proxy 配置
就是個代理模式，轉(zhuǎn)發(fā)下請求。從瀏覽器請求變成 內(nèi)置的服務(wù)器請求，服務(wù)器請求是沒有跨域一說的。
原來是 瀏覽器a域名請求 -> 服務(wù)器b域名。 × 跨域錯誤
現(xiàn)在是 瀏覽器a域名請求 -> 服務(wù)器a域名 api -> 服務(wù)器b域名api √正常。
服務(wù)器a域名 api 就是 proxy 干的。
配置示例文章來源：http://www.zghlxwxcb.cn/news/detail-500127.html
devServer: {
open:true,
overlay: {
warnings: false,
errors: false,
},
proxy: {
["/dev-api"]: {
target: 'http:/b.com/api', // 服務(wù)器b域名api
changeOrigin: true,
pathRewrite: {
['^' + "/dev-api"]: ''
}
}
},
disableHostCheck: true
},
文章來源地址http://www.zghlxwxcb.cn/news/detail-500127.html
到了這里，關(guān)于vue.config.js 跨域配置的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
