資訊專欄INFORMATION COLUMN
摘要：本文要實(shí)現(xiàn)的是使用搭建的項(xiàng)目在開發(fā)時(shí)配置跨域，上線后不做任何任何修改，接口也可以訪問閱讀時(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í)配置跨域，上線后不做任何任何修改，接口也可以訪問閱讀時(shí)間需要三分鐘
production：產(chǎn)品 生產(chǎn)環(huán)境
development：開發(fā) 開發(fā)環(huán)境
1.開發(fā)環(huán)境設(shè)置跨域使用工具：vue-cli自帶的配置
配置目錄 /config/index.js
//自行復(fù)制黏貼
proxyTable: {
"/apis":{
target: "http://10.1.63.26:19080/", // 后臺(tái)api
changeOrigin: true, //是否跨域
// secure: true,
pathRewrite: {
"^/apis": "" //需要rewrite的,
}
}
}
注意：以上配置只有在生產(chǎn)環(huán)境下有效，你打包之后就不起作用了
這樣就存在一個(gè)問題，你的接口都是/apis開頭的，打包之后部署到服務(wù)器要去除/apis,才能正常訪問后臺(tái)接口，如何解決呢？
2.生產(chǎn)環(huán)境設(shè)置跨域使用工具 axios 中文文檔地址思路
解決的思路是這樣的：
首先，axios的默認(rèn)實(shí)例有一個(gè)baseURL的屬性，配置了baseURL之后，你訪問接口時(shí)就會(huì)自動(dòng)帶上
假設(shè)你vue-cli起了一個(gè)開發(fā)環(huán)境，地址為http://localhost:8080
//例1 當(dāng)不設(shè)置baseURL時(shí)
axios.get("/user") //訪問/user相當(dāng)于訪問 http://localhost:8080/user
//例2
axios.defaults.baseURL="/apis"
axios.get("/user") //訪問/user就相當(dāng)于訪問 http://localhost:8080/apis/user
//例3
axios.defaults.baseURL="https://sbsb.com"
axios.get("/user") //訪問/user就相當(dāng)于訪問 https://sbsb.com/user
//例4
axios.defaults.baseURL="https://sbsb.com/apis"
axios.get("/user") //訪問/user就相當(dāng)于訪問 https://sbsb.com/apis/user
然后我們要根據(jù)現(xiàn)在的環(huán)境是開發(fā)環(huán)境還是生產(chǎn)環(huán)境，配置不同的baseURL
//判斷是否是生產(chǎn)環(huán)境
var isPro = process.env.NODE_ENV === "production" //process.env.NODE_ENV用于區(qū)分是生產(chǎn)環(huán)境還是開發(fā)環(huán)境
//配置不同的baseURL
module.exports = {
baseURL: isPro ? "http://sbsb.com:8888/" : "/apis"
}
process.env.NODE_ENV用于區(qū)分是生產(chǎn)環(huán)境還是開發(fā)環(huán)境，這個(gè)值是webpack設(shè)置的
動(dòng)手操作假設(shè)后臺(tái)api的rul是http://sbsb.com:8888/
首先在/config目錄下新建一個(gè)文件,我這里叫api.config.js
寫入以下代碼
//判斷是否是生產(chǎn)環(huán)境
var isPro = process.env.NODE_ENV === "production" //process.env.NODE_ENV用于區(qū)分是生產(chǎn)環(huán)境還是開發(fā)環(huán)境
//根據(jù)環(huán)境不同導(dǎo)出不同的baseURL
module.exports = {
baseURL: isPro ? "http://sbsb.com:8888/" : "/apis"
}
然后，在main.js中引入axios和剛才那個(gè)文件
//main.js import Vue from "vue" import axios from "axios" import apiConfig from "../config/api.config.js" axios.defaults.baseURL=apiConfig.baseURL //axios的其他配置...
這樣配置之后，打包部署到服務(wù)器上也不用再手工去除/apis
如果配置過程中出現(xiàn)了問題，自己調(diào)試，看看訪問的url正不正確
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/101055.html
摘要：項(xiàng)目是基于搭建，項(xiàng)目分為開發(fā)環(huán)境，測(cè)試環(huán)境，預(yù)生產(chǎn)環(huán)境，生產(chǎn)環(huán)境，其中開發(fā)環(huán)境和測(cè)試環(huán)境調(diào)用同一個(gè)接口，開發(fā)環(huán)境調(diào)用服務(wù)器端的測(cè)試接口會(huì)跨域，以上需求就引發(fā)了一些問題，問題一測(cè)試環(huán)境包括開發(fā)環(huán)境，并且開發(fā)環(huán)境跨域，預(yù)生產(chǎn)環(huán)境，生產(chǎn)環(huán)境，有 項(xiàng)目是基于vue-cli搭建，項(xiàng)目分為開發(fā)環(huán)境，測(cè)試環(huán)境，預(yù)生產(chǎn)環(huán)境，生產(chǎn)環(huán)境，其中開發(fā)環(huán)境和測(cè)試環(huán)境調(diào)用同一個(gè)接口，開發(fā)環(huán)境調(diào)用服務(wù)器端的測(cè)試接口...
摘要：需求上是我們只需要在開發(fā)環(huán)境配置跨域代理，所以我們可以在開發(fā)環(huán)境的配置上加上能夠代理上的環(huán)境變量即可。修改的配置將改為這里依然是采用的來做的代理配置，一些自定義配置可以移步到官網(wǎng)去進(jìn)行參考。 寫在前面 vue-cli 3.x 的beta版本已經(jīng)發(fā)布了一段時(shí)間，很早就像體驗(yàn)一番一直找不到時(shí)間。這些日子剛好有空就想著依照網(wǎng)上的一些例子練下手，剛一上手就踩到坑了。3.x 版本對(duì)整個(gè)項(xiàng)目的構(gòu)建...
摘要：有兩種方法，一種是在開發(fā)環(huán)境中設(shè)置通過的，另一種是在服務(wù)器上修改的配置設(shè)置。這樣我們以后使用訪問接口就可以不加了，打包后訪問也不用手動(dòng)去除統(tǒng)一管理在項(xiàng)目開發(fā)過程中，會(huì)涉及到很多接口的處理，當(dāng)項(xiàng)目足夠大時(shí)，就需要統(tǒng)一管理接口。 這篇文章總結(jié)了vue項(xiàng)目的所遇到的問題，包括跨域、用戶認(rèn)證、接口統(tǒng)一管理、路由配置、兼容性處理，性能優(yōu)化等內(nèi)容。 項(xiàng)目github地址 : 前端 https:...
閱讀 4604·2021-09-22 14:57
閱讀 565·2019-08-30 15:56
閱讀 2672·2019-08-30 15:53
閱讀 2245·2019-08-29 14:15
閱讀 1692·2019-08-28 17:54
閱讀 564·2019-08-26 13:37
閱讀 3484·2019-08-26 10:57
閱讀 1049·2019-08-26 10:32
