vue+axios給開發(fā)環(huán)境和生產(chǎn)環(huán)境配置不同的接口地址

shadowbook 發(fā)布于2019-08-26 10:48 / 3015人閱讀

摘要：為什么要配置不同的接口地址在開發(fā)過程中，前端請求訪問的是自己本機啟動的后臺服務(wù)，此時涉及到跨域因為端口不一樣，所以在文件中配置了代理檢查某個文件是否存在如果可以執(zhí)行到這里那么就表示存在了捕獲異常然后再文件夾里建立對應(yīng)的項目名文件，被請求的地

1、為什么要配置不同的接口地址
在開發(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ù)器代碼部署在一起，負責需要通過Nginx進行跨域的轉(zhuǎn)發(fā)配置。

云服務(wù)器 GPU云服務(wù)器 java開發(fā)環(huán)境的配置給云服務(wù)器ecs配置環(huán)境 linux系統(tǒng) 如何配置java系統(tǒng)的開發(fā)環(huán)境開發(fā)環(huán)境配置

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/106804.html

相關(guān)文章

vue開發(fā)環(huán)境配置跨域，一步到位

摘要：本文要實現(xiàn)的是使用搭建的項目在開發(fā)時配置跨域，上線后不做任何任何修改，接口也可以訪問閱讀時間需要三分鐘產(chǎn)品生產(chǎn)環(huán)境開發(fā)開發(fā)環(huán)境開發(fā)環(huán)境設(shè)置跨域使用工具自帶的配置配置目錄自行復制黏貼后臺是否跨域需要的注意以上配置只有在生產(chǎn)環(huán)境下有效，你打本文要實現(xiàn)的是：使用vue-cli搭建的項目在開發(fā)時配置跨域，上線后不做任何任何修改，接口也可以訪問閱讀時間需要三分鐘 production：產(chǎn)品 ...

shmily 2019-08-23 14:44 評論0 收藏0
vue開發(fā)項目完全指南

摘要：有兩種方法，一種是在開發(fā)環(huán)境中設(shè)置通過的，另一種是在服務(wù)器上修改的配置設(shè)置。這樣我們以后使用訪問接口就可以不加了，打包后訪問也不用手動去除統(tǒng)一管理在項目開發(fā)過程中，會涉及到很多接口的處理，當項目足夠大時，就需要統(tǒng)一管理接口。這篇文章總結(jié)了vue項目的所遇到的問題，包括跨域、用戶認證、接口統(tǒng)一管理、路由配置、兼容性處理，性能優(yōu)化等內(nèi)容。項目github地址 : 前端 https:...

leoperfect 2019-08-23 16:16 評論0 收藏0
前端面試匯總VUE(一）

摘要：因為對用的比較多，所以面試投的都是相關(guān)的崗位，下面是在面試中遇到的常見的問題。這樣前端請求就可以使用接口名稱，但是在生產(chǎn)環(huán)境下，我們不需要接口請求前面加，所以就需要判斷開發(fā)環(huán)境和生產(chǎn)環(huán)境。的核心存放數(shù)據(jù)變更狀態(tài)同步的調(diào)用，更改狀態(tài)的。因為對vue用的比較多，所以面試投的都是vue相關(guān)的崗位，下面是在面試中遇到的常見的vue問題。 1.Vue 不同環(huán)境配置不同的接口地址；我們在項目中...

phodal 2019-08-23 18:28 評論0 收藏0
從0到1使用VUE-CLI3開發(fā)實戰(zhàn)（四）: Axios封裝

摘要：從到使用開發(fā)實戰(zhàn)四封裝有很多同學看了本系列的前幾篇之后建議我暫時先不用，于是小肆之后將把換成繼續(xù)下面的文章。前置閱讀用從到做一個完整功能手機站一從到開發(fā)實戰(zhàn)手機站二提交規(guī)范配置從到使用開發(fā)實戰(zhàn)三知識儲備從0到1使用VUE-CLI3開發(fā)實戰(zhàn)（四）: Axios封裝有很多同學看了本系列的前幾篇之后建議我暫時先不用TS，于是小肆之后將把TS換成JS繼續(xù)下面的文章。今天給大家?guī)眄椖恐蟹浅?..

ThinkSNS 2019-08-23 14:57 評論0 收藏0
基于vue-cli3.0構(gòu)建功能完善的移動端架子

摘要：對應(yīng)每一個環(huán)境可能都會有所差異，比如說服務(wù)器地址接口地址地址等等。具體的值取決于應(yīng)用運行的模式。會和中的選項相符，即你的應(yīng)用會部署到的基礎(chǔ)路徑。基于vue-cli3.0構(gòu)建功能完善的移動端架子，主要功能包括 webpack 打包擴展 css：sass支持、normalize.css、_mixin.scss、_variables.scss vw、rem布局跨域設(shè)置 eslint設(shè)置...

Loong_T 2019-08-23 17:05 評論0 收藏0