溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章給大家分享的是有關vue+axios如何給開發環境和生產環境配置不同的接口地址的內容。小編覺得挺實用的，因此分享給大家做個參考，一起跟隨小編過來看看吧。
為什么要配置不同的接口地址
在開發過程中，前端請求訪問的是自己本機啟動的后臺服務，此時涉及到跨域（因為端口不一樣），所以在config/index.js文件中配置了代理
//檢查某個文件是否存在
try {
fs.statSync(path.join(__dirname, '../proxy/' + templatedir + '.json'))
//如果可以執行到這里那么就表示存在了
console.log(124)
proxyTable = require('../proxy/' + templatedir + '.json')
} catch (e) {
//捕獲異常'
}
module.exports = {
dev: {
// Paths
assetsSubDirectory: 'static',
assetsPublicPath: '/',
proxyTable: proxyTable,
// Various Dev Server settings
host: 'localhost', // can be overwritten by process.env.HOST
index: templatedir,
port: 8080, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined
}然后再proxy文件夾里建立對應的項目名.json文件，
{
"/": {
"target": "", // 被請求的地址
"changeOrigin": true,
"pathRewrite": {
"^/": "/"
}
}
}注意：proxyTanle這個插件只限于開發模式下，后面一定要將前端代碼和服務器代碼部署在一起，負責需要通過Nginx進行跨域的轉發配置。
感謝各位的閱讀！關于“vue+axios如何給開發環境和生產環境配置不同的接口地址”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，讓大家可以學到更多知識，如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
