vue開(kāi)發(fā)環(huán)境配置跨域的方法步驟
本文要實(shí)現(xiàn)的是:使用vue-cli搭建的項(xiàng)目在開(kāi)發(fā)時(shí)配置跨域,上線后不做任何任何修改,接口也可以訪問(wèn)
production:產(chǎn)品 生產(chǎn)環(huán)境
development:開(kāi)發(fā) 開(kāi)發(fā)環(huán)境
1.開(kāi)發(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è)問(wèn)題,你的接口都是/apis開(kāi)頭的,打包之后部署到服務(wù)器要去除/apis,才能正常訪問(wèn)后臺(tái)接口,如何解決呢?
2.生產(chǎn)環(huán)境設(shè)置跨域
使用工具 axios 中文文檔地址
思路
解決的思路是這樣的:
首先,axios有一個(gè)baseURL的屬性,配置了baseURL之后,你訪問(wèn)接口時(shí)就會(huì)自動(dòng)帶上
假設(shè)你vue-cli起了一個(gè)開(kāi)發(fā)環(huán)境,地址為http://localhost:8080
//例1 當(dāng)不設(shè)置baseURL時(shí)
axios.get('/user') //訪問(wèn)/user相當(dāng)于訪問(wèn) http://localhost:8080/user
//例2
axios.baseURL='/apis'
axios.get('/user') //訪問(wèn)/user就相當(dāng)于訪問(wèn) http://localhost:8080/apis/user
//例3
axios.baseURL='https://sbsb.com'
axios.get('/user') //訪問(wèn)/user就相當(dāng)于訪問(wèn) https://sbsb.com/user
//例4
axios.baseURL='https://sbsb.com/apis'
axios.get('/user') //訪問(wèn)/user就相當(dāng)于訪問(wèn) https://sbsb.com/apis/user
然后我們要根據(jù)現(xiàn)在的環(huán)境是開(kāi)發(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)境還是開(kāi)發(fā)環(huán)境
//配置不同的baseURL
module.exports = {
baseURL: isPro ? 'http://sbsb.com:8888/' : '/apis'
}
process.env.NODE_ENV用于區(qū)分是生產(chǎn)環(huán)境還是開(kāi)發(fā)環(huán)境,這個(gè)值是webpack設(shè)置的
動(dòng)手操作
假設(shè)后臺(tái)api的rul是http://sbsb.com:8888/
首先在/config目錄下新建一個(gè)文件,我這里叫api.config.js
寫(xiě)入以下代碼
//判斷是否是生產(chǎn)環(huán)境
var isPro = process.env.NODE_ENV === 'production' //process.env.NODE_ENV用于區(qū)分是生產(chǎn)環(huán)境還是開(kāi)發(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.baseURL=apiConfig.baseURL //axios的其他配置...
這樣配置之后,打包部署到服務(wù)器上也不用再手工去除/apis
如果配置過(guò)程中出現(xiàn)了問(wèn)題,自己調(diào)試,看看訪問(wèn)的url正不正確
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
elementUI Vue 單個(gè)按鈕顯示和隱藏的變換功能(兩種方法)
小編最近遇到這樣的需求,當(dāng)點(diǎn)擊一個(gè)按鈕可以變換里面字的內(nèi)容,剛開(kāi)始還真是一頭霧水,不知所措。仔細(xì)想想屢屢思緒,很容易的解決了。接下來(lái)通過(guò)本文給大家介紹elementUI Vue 單個(gè)按鈕顯示和隱藏的變換功能,需要的朋友可以參考下2018-09-09
Vue終端取消vue、prettier警告warn問(wèn)題
這篇文章主要介紹了Vue終端取消vue、prettier警告warn問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10
Vue父組件觸發(fā)子組件中的實(shí)現(xiàn)方法
文章總結(jié):介紹了兩種實(shí)現(xiàn)父組件觸發(fā)子組件方法的常用方法:通過(guò)ref訪問(wèn)子組件實(shí)例并調(diào)用方法,以及使用自定義事件觸發(fā)子組件方法2025-01-01
vue 項(xiàng)目打包時(shí)樣式及背景圖片路徑找不到的解決方式
今天小編就為大家分享一篇vue 項(xiàng)目打包時(shí)樣式及背景圖片路徑找不到的解決方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-11-11
vue實(shí)現(xiàn)禁止瀏覽器記住密碼功能的示例代碼
這篇文章主要介紹了vue實(shí)現(xiàn)禁止瀏覽器記住密碼功能的示例代碼,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2021-02-02

