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ō)代理沒(méi)有配置成功。
原因是我的.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)文章
Vue2.0 axios前后端登陸攔截器(實(shí)例講解)
下面小編就為大家?guī)?lái)一篇Vue2.0 axios前后端登陸攔截器(實(shí)例講解)。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-10-10解決Vue項(xiàng)目Network:?unavailable的問(wèn)題
項(xiàng)目只能通過(guò)Local訪問(wèn)而不能通過(guò)Network訪問(wèn),本文主要介紹了解決Vue項(xiàng)目Network:?unavailable的問(wèn)題,具有一定的參考價(jià)值,感興趣的可以了解一下2024-06-06Vuejs如何通過(guò)Axios請(qǐng)求數(shù)據(jù)
這篇文章主要介紹了Vuejs如何通過(guò)Axios請(qǐng)求數(shù)據(jù),具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-04-04vue.extend實(shí)現(xiàn)alert模態(tài)框彈窗組件
這篇文章主要為大家詳細(xì)介紹了vue.extend實(shí)現(xiàn)alert模態(tài)框彈窗組件,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2018-04-04Vue精美簡(jiǎn)潔登錄頁(yè)完整代碼實(shí)例
這篇文章主要給大家介紹了關(guān)于Vue精美簡(jiǎn)潔登錄頁(yè)完整代碼的相關(guān)資料,通過(guò)文中的方法大家可以使用實(shí)現(xiàn)簡(jiǎn)單的用戶登錄界面,下面通過(guò)示例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-07-07Vue3項(xiàng)目中引用TS語(yǔ)法的實(shí)例講解
這篇文章主要介紹了Vue3項(xiàng)目中引用TS語(yǔ)法的實(shí)例講解,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-05-05elementUI實(shí)現(xiàn)級(jí)聯(lián)選擇器
這篇文章主要為大家詳細(xì)介紹了elementUI實(shí)現(xiàn)級(jí)聯(lián)選擇器,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-11-11