vue配置代理vue.config.js后不生效的解決(小坑)
vue配置代理vue.config.js后不生效
我的項(xiàng)目使用vue-cli4腳手架搭建的,想要修改webpack配置,需要手動(dòng)在根目錄下面添加一個(gè)vue.config.js文件,會(huì)自動(dòng)識(shí)別該文件。
附上我的配置
// vue.config.js 配置說(shuō)明
//官方vue.config.js 參考文檔 https://cli.vuejs.org/zh/config/#css-loaderoptions
// 這里只列一部分,具體配置參考文檔
module.exports = {
// 部署生產(chǎn)環(huán)境和開發(fā)環(huán)境下的URL。
// 默認(rèn)情況下,Vue CLI 會(huì)假設(shè)你的應(yīng)用是被部署在一個(gè)域名的根路徑上
//例如 https://www.my-app.com/。如果應(yīng)用被部署在一個(gè)子路徑上,你就需要用這個(gè)選項(xiàng)指定這個(gè)子路徑。例如,如果你的應(yīng)用被部署在 https://www.my-app.com/my-app/,則設(shè)置 baseUrl 為 /my-app/。
//baseUrl 從 Vue CLI 3.3 起已棄用,請(qǐng)使用publicPath
//baseUrl: process.env.NODE_ENV === "production" ? "./" : "/",
publicPath: "./",
// outputDir: 在npm run build 或 yarn build 時(shí) ,生成文件的目錄名稱(要和baseUrl的生產(chǎn)環(huán)境路徑一致)
outputDir: "mycli3",
//用于放置生成的靜態(tài)資源 (js、css、img、fonts) 的;(項(xiàng)目打包之后,靜態(tài)資源會(huì)放在這個(gè)文件夾下)
assetsDir: "assets",
//指定生成的 index.html 的輸出路徑 (打包之后,改變系統(tǒng)默認(rèn)的index.html的文件名)
// indexPath: "myIndex.html",
//默認(rèn)情況下,生成的靜態(tài)資源在它們的文件名中包含了 hash 以便更好的控制緩存。你可以通過(guò)將這個(gè)選項(xiàng)設(shè)為 false 來(lái)關(guān)閉文件名哈希。(false的時(shí)候就是讓原來(lái)的文件名不改變)
filenameHashing: false,
// lintOnSave:{ type:Boolean default:true } 問(wèn)你是否使用eslint
lintOnSave: true,
//如果你想要在生產(chǎn)構(gòu)建時(shí)禁用 eslint-loader,你可以用如下配置
// lintOnSave: process.env.NODE_ENV !== 'production',
//是否使用包含運(yùn)行時(shí)編譯器的 Vue 構(gòu)建版本。設(shè)置為 true 后你就可以在 Vue 組件中使用 template 選項(xiàng)了,但是這會(huì)讓你的應(yīng)用額外增加 10kb 左右。(默認(rèn)false)
// runtimeCompiler: false,
/**
* 如果你不需要生產(chǎn)環(huán)境的 source map,可以將其設(shè)置為 false 以加速生產(chǎn)環(huán)境構(gòu)建。
* 打包之后發(fā)現(xiàn)map文件過(guò)大,項(xiàng)目文件體積很大,設(shè)置為false就可以不輸出map文件
* map文件的作用在于:項(xiàng)目打包后,代碼都是經(jīng)過(guò)壓縮加密的,如果運(yùn)行時(shí)報(bào)錯(cuò),輸出的錯(cuò)誤信息無(wú)法準(zhǔn)確得知是哪里的代碼報(bào)錯(cuò)。
* 有了map就可以像未加密的代碼一樣,準(zhǔn)確的輸出是哪一行哪一列有錯(cuò)。
* */
productionSourceMap: false,
// 它支持webPack-dev-server的所有選項(xiàng)
devServer: {
// host: "127.0.0.1",
port: 8080, // 端口號(hào)
https: false, // https:{type:Boolean}
open: true, //配置自動(dòng)啟動(dòng)瀏覽器
// proxy: 'http://localhost:4000' // 配置跨域處理,只有一個(gè)代理
// 配置多個(gè)代理
proxy: {
"/api": {
target: "http://139.196.42.209:5004/api", // 要訪問(wèn)的接口域名
//ws: true, // 是否啟用websockets
changeOrigin: true, //開啟代理:在本地會(huì)創(chuàng)建一個(gè)虛擬服務(wù)端,然后發(fā)送請(qǐng)求的數(shù)據(jù),并同時(shí)接收請(qǐng)求的數(shù)據(jù),這樣服務(wù)端和服務(wù)端進(jìn)行數(shù)據(jù)的交互就不會(huì)有跨域問(wèn)題
pathRewrite: {
"^/api": "" //這里理解成用'/api'代替target里面的地址,比如我要調(diào)用'http://40.00.100.100:3002/user/add',直接寫'/api/user/add'即可
}
}
}
}
}
再對(duì)axios進(jìn)行二次封裝
import axios from 'axios'
import { getStore, removeStore } from '../utils'
import { Message } from 'element-ui'
// 新建axios實(shí)例
const instance = axios.create({
baseURL: process.env.VUE_APP_BASE_API,
timeout: 3000
})
// 添加請(qǐng)求攔截器
instance.interceptors.request.use(config => {
let token = sessionStorage.getItem('token')
if (token) {
config.headers['token'] = token
}
return config
}, error => {
return Promise.reject(error)
})
// 添加相應(yīng)攔截器
instance.interceptors.response.use(response => {
let {code, msg} = response.data
if (code !== 20000) {
Message({
type: 'warning',
message: msg || 'error',
duration: 3000,
showClose: true
})
}
return response
}, error => {
return Promise.reject(error)
})
export default instance
發(fā)送請(qǐng)求時(shí)就不需要輸入前面的http://139.196.42.209:5004/api了。
但是我配置完發(fā)送請(qǐng)求仍然不是從我本地發(fā)送的,請(qǐng)求地址還是http://139.196.42.209:5004/api/user/info,就是說(shuō)代理沒有配置成功。
原因是我的.env.development文件里面寫的
EVN = 'development' VUE_APP_BASE_API = 'http://139.196.42.209:5004/api'
在配置了本地代理后開發(fā)環(huán)境也不能寫全路徑,改成
EVN = 'development' VUE_APP_BASE_API = '/api'
此時(shí),本地代理就成功了

總結(jié)
以上為個(gè)人經(jīng)驗(yàn),希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
相關(guān)文章
vue+canvas如何實(shí)現(xiàn)根據(jù)數(shù)據(jù)展示不同高度,不同漸變顏色的長(zhǎng)方體效果
這篇文章主要介紹了vue+canvas如何實(shí)現(xiàn)根據(jù)數(shù)據(jù)展示不同高度,不同漸變顏色的長(zhǎng)方體效果,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-09-09
VUE使用day.js顯示時(shí)分秒并實(shí)時(shí)更新時(shí)間效果實(shí)例
vue.js是目前比較流行的前端框架之一,它提供了非常多的基礎(chǔ)組件和工具庫(kù),以方便開發(fā)者快速搭建具有可重用性的web應(yīng)用,下面這篇文章主要給大家介紹了關(guān)于VUE使用day.js顯示時(shí)分秒并實(shí)時(shí)更新時(shí)間效果的相關(guān)資料,需要的朋友可以參考下2024-04-04
Vue手動(dòng)埋點(diǎn)設(shè)計(jì)的方法實(shí)例
這篇文章主要給大家介紹了關(guān)于Vue手動(dòng)埋點(diǎn)設(shè)計(jì)的相關(guān)資料,內(nèi)容簡(jiǎn)明扼要并且容易理解,絕對(duì)能使你眼前一亮,需要的朋友可以參考下2022-03-03
vue中使用mixins/extends傳入?yún)?shù)的方式
這篇文章主要介紹了vue中使用mixins/extends傳入?yún)?shù)的方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-05-05
vue-resourc發(fā)起異步請(qǐng)求的方法
這篇文章主要介紹了vue-resourc發(fā)起異步請(qǐng)求的方法,本文給大家介紹的非常詳細(xì),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-02-02

