在 package.json 的同級(jí)目錄（項(xiàng)目根目錄）下創(chuàng)建 vue.config.js

在 vue.config.js 寫入下列內(nèi)容

module.exports = {devServer: {proxy: 'http://localhost:8080'}}

這會(huì)告訴開發(fā)服務(wù)器將任何未知請(qǐng)求 (沒有匹配到靜態(tài)文件的請(qǐng)求) 代理到 http://localhost:4000。

多服務(wù)器代理配置：

devServer: {proxy: { // 配置如下代碼'/api': {target: 'http://ip:9000/', // 你請(qǐng)求的第三方接口changeOrigin: true, // 在本地會(huì)創(chuàng)建一個(gè)虛擬服務(wù)端，然后發(fā)送請(qǐng)求的數(shù)據(jù)，并同時(shí)接收請(qǐng)求的數(shù)據(jù)，這樣服務(wù)端和服務(wù)端進(jìn)行數(shù)據(jù)的交互就不會(huì)有跨域問題ws: true,pathRewrite: { // 路徑重寫，'^/api': '' // 替換target中的請(qǐng)求地址，也就是說以后你在請(qǐng)求https://xxxxxx/dictionary/data_dictionary_front.json這個(gè)地址的時(shí)候直接寫成/api即可。}},'/wordsFeeling': {target: 'http://ip:5000/', // 你請(qǐng)求的第三方接口changeOrigin: true, // 在本地會(huì)創(chuàng)建一個(gè)虛擬服務(wù)端，然后發(fā)送請(qǐng)求的數(shù)據(jù)，并同時(shí)接收請(qǐng)求的數(shù)據(jù)，這樣服務(wù)端和服務(wù)端進(jìn)行數(shù)據(jù)的交互就不會(huì)有跨域問題ws: true,pathRewrite: { // 路徑重寫，'^/wordsFeeling': '' // 替換target中的請(qǐng)求地址，也就是說以后你在請(qǐng)求https://xxxxxx/dictionary/data_dictionary_front.json這個(gè)地址的時(shí)候直接寫成/api即可。}}},}

終端打開項(xiàng)目根目錄，輸入:

npm run serve

此時(shí)會(huì)以 vue.config.js 作為配置文件啟動(dòng)項(xiàng)目

配置過程遇到的坑

使用命令 vue serve 啟動(dòng)時(shí)，需在 App.vue 或 main.js 所在的目錄下啟動(dòng)，此時(shí)不會(huì)以 根目錄下的 vue.config.js作為配置文件導(dǎo)致代理設(shè)置失敗。

因此在需要 設(shè)置代理 時(shí)應(yīng) 在項(xiàng)目 根目錄 下 使用 npm run serve 的方式啟動(dòng)

vue配置官方文檔：https://cli.vuejs.org/zh/config/#%E5%85%A8%E5%B1%80-cli-%E9%85%8D%E7%BD%AE

總結(jié)

以上是生活随笔為你收集整理的Vue代理配置的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。