詳解vue+axios給開發(fā)環(huán)境和生產(chǎn)環(huán)境配置不同的接口地址
更新時間：2019年08月16日 10:34:13 作者：雨夢遲歌
這篇文章主要介紹了詳解vue+axios給開發(fā)環(huán)境和生產(chǎn)環(huán)境配置不同的接口地址，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
為什么要配置不同的接口地址
在開發(fā)過程中，前端請求訪問的是自己本機啟動的后臺服務(wù)，此時涉及到跨域（因為端口不一樣），所以在config/index.js文件中配置了代理
//檢查某個文件是否存在
try {
fs.statSync(path.join(__dirname, '../proxy/' + templatedir + '.json'))
//如果可以執(zhí)行到這里那么就表示存在了
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文件夾里建立對應(yīng)的項目名.json文件，
{
"/": {
"target": "", // 被請求的地址
"changeOrigin": true,
"pathRewrite": {
"^/": "/"
}
}
}
注意：proxyTanle這個插件只限于開發(fā)模式下，后面一定要將前端代碼和服務(wù)器代碼部署在一起，負(fù)責(zé)需要通過Nginx進(jìn)行跨域的轉(zhuǎn)發(fā)配置。
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要為大家詳細(xì)介紹了Vue.js仿 Select下拉框效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-02-02
動態(tài)組件是一種在Vue中根據(jù)條件或用戶輸入來動態(tài)渲染不同組件,本文主要介紹了vue3自定義動態(tài)不同UI組件篩選框案例,具有一定的參考價值,感興趣的可以了解一下2025-04-04
ant-design-vue是螞蟻金服 Ant Design 官方唯一推薦的Vue版UI組件庫，它其實是Ant Design的Vue實現(xiàn)，組件的風(fēng)格與Ant Design保持同步，組件的html結(jié)構(gòu)和css樣式也保持一致，很多朋友在使用過程中遇到很多問題，今天小編就給大家分享一篇教程幫助大家快速閉坑，一起看看吧2020-01-01
使用Vue3實現(xiàn)在瀏覽器端進(jìn)行zip文件壓縮
在前端開發(fā)中,我們時常需要處理文件上傳和下載的功能,本文主要和大家分享一下如何使用Vue3和JSZip庫在瀏覽器端實現(xiàn)zip文件壓縮,需要的可以參考下2024-05-05
這篇文章主要為大家詳細(xì)介紹了vue實現(xiàn)用戶登錄切換，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-04-04
這篇文章主要介紹了Vue3+ElementPlus 表單組件的封裝實例，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-06-06
vue-router實現(xiàn)webApp切換頁面動畫效果代碼
本篇文章主要介紹了vue實現(xiàn)app頁面切換效果實例代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-05-05
這篇文章主要為大家介紹了手寫一個vite插件教程示例，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-06-06
vue路由傳參的使用場景一般都是應(yīng)用在父路由跳轉(zhuǎn)到子路由時,攜帶參數(shù)跳轉(zhuǎn),下面這篇文章主要給大家介紹了關(guān)于Vue路由傳參的三種方式,文中通過實例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-01-01
這篇文章主要為大家詳細(xì)介紹了Vue實現(xiàn)本地購物車功能，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-12-12