vue 前端靈活改變后端地址
起因：
我們?cè)谧鲰?xiàng)目時(shí)；很多時(shí)候會(huì)遇到后臺(tái)地址變動(dòng)，不管是在打包或者是開(kāi)發(fā)中；每一次后臺(tái)開(kāi)機(jī)啟動(dòng)或者換電腦啟動(dòng)后臺(tái)，后臺(tái)地址都會(huì)隨之變動(dòng)；而這種情況；每次后臺(tái)改動(dòng)前端就要去找地址跟著改；開(kāi)發(fā)還好，實(shí)際應(yīng)用時(shí)，每次都要改了之后再打包；頻繁打包就很麻煩。有沒(méi)有什么方式可以直接修改后臺(tái)地址呢？當(dāng)然有，該文就是提供一種方便的處理方式。
使用：
第一種方式：
1.我們?cè)谀_手架的public文件夾中新建一個(gè)js文件，用于存儲(chǔ)后臺(tái)地址配置：
示例 config.js 文件：
module.exports = {
interfaceIP: "http://xxxxxx",
// interfaceIP: "http://xxxxxxx",
};
2.在 vue.config.js 中引入 config.js：
這個(gè)地方要注意一下，因?yàn)関ue.config.js是在Node.js環(huán)境下執(zhí)行的，而不是在瀏覽器環(huán)境下執(zhí)行，所以要用Node.js中的require語(yǔ)法。
const interfaceIP = require("./public/config");
然后后臺(tái)代理地址文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-811175.html
devServer: {
//本機(jī)地址
host: 'localhost',
//獲取port端口
port: port,
// 端口配置
// port: 1888,
// 反向代理配置
proxy: {
//process.env.VUE_APP_BASE_API的參數(shù)會(huì)讀取對(duì)應(yīng)環(huán)境變量數(shù)據(jù)，
//如讀取的數(shù)據(jù)是'/api',那么意思就是前端請(qǐng)求的/api路徑都會(huì)被帶來(lái)到，參數(shù)target的地址
[process.env.VUE_APP_BASE_API]: {
/* 服務(wù)器5866 本地電腦5566 */
target: interfaceIP.interfaceIP,
//代理的路徑
// target: process.env.VUE_APP_BACKEND_URL,
changOrigin: true, // 允許跨域
ws: true,
pathRewrite: {
['^' + process.env.VUE_APP_BASE_API]: '/'
}
}
}
}
然后我們?cè)诖虬臅r(shí)候就可以看到dist里面有一個(gè)config.js 文件，就可以在這個(gè)文件中修改地址了；
第二種方式：
第二種就不是直接修改地址了，而是配置環(huán)境地址；使用環(huán)境變量來(lái)設(shè)置后臺(tái)代理地址。在src的同一級(jí)新建.env.development文件；在里面配置好需要的多個(gè)后臺(tái)地址。
示例代碼如下：文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-811175.html
// vue.config.js
module.exports = {
devServer: {
proxy: {
[process.env.VUE_APP_BASE_API]: {
/* 服務(wù)器5866 本地電腦5566 */
//代理的路徑
target: process.env.VUE_APP_BACKEND_URL,
changOrigin: true, // 允許跨域
ws: true,
pathRewrite: {
['^' + process.env.VUE_APP_BASE_API]: '/'
}
}
}
}
};
// .env.development
# 開(kāi)發(fā)環(huán)境配置
ENV = 'development'
#設(shè)置端口號(hào)
port = 8080
# 前端請(qǐng)求路徑
VUE_APP_BASE_API = '/api'
#后端服務(wù)器地址不要忘記添加http或https
VUE_APP_BACKEND_URL = http://XXXXXXXXXXX
到了這里，關(guān)于vue 前端靈活改變后端地址的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
