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

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

摘要：為什么要配置不同的接口地址在開發(fā)過(guò)程中，前端請(qǐng)求訪問(wèn)的是自己本機(jī)啟動(dòng)的后臺(tái)服務(wù)，此時(shí)涉及到跨域因?yàn)槎丝诓灰粯?，所以在文件中配置了代理檢查某個(gè)文件是否存在如果可以執(zhí)行到這里那么就表示存在了捕獲異常然后再文件夾里建立對(duì)應(yīng)的項(xiàng)目名文件，被請(qǐng)求的地

1、為什么要配置不同的接口地址
在開發(fā)過(guò)程中，前端請(qǐng)求訪問(wèn)的是自己本機(jī)啟動(dòng)的后臺(tái)服務(wù)，此時(shí)涉及到跨域（因?yàn)槎丝诓灰粯樱?，所以在config/index.js文件中配置了代理

//檢查某個(gè)文件是否存在
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文件夾里建立對(duì)應(yīng)的項(xiàng)目名.json文件，

{
  "/": {
    "target": "", // 被請(qǐng)求的地址
    "changeOrigin": true,
    "pathRewrite": {
      "^/": "/"
    }
  }
}

注意：proxyTanle這個(gè)插件只限于開發(fā)模式下，后面一定要將前端代碼和服務(wù)器代碼部署在一起，負(fù)責(zé)需要通過(guò)Nginx進(jìn)行跨域的轉(zhuǎn)發(fā)配置。

GPU云服務(wù)器云服務(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)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/106804.html

相關(guān)文章

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

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

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

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

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

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

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

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

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

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

Loong_T 2019-08-23 17:05 評(píng)論0 收藏0