在 package.json 的同級目錄（項目根目錄）下創建 vue.config.js

在 vue.config.js 寫入下列內容

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

這會告訴開發服務器將任何未知請求 (沒有匹配到靜態文件的請求) 代理到 http://localhost:4000。

多服務器代理配置：

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

終端打開項目根目錄，輸入:

npm run serve

此時會以 vue.config.js 作為配置文件啟動項目

配置過程遇到的坑

使用命令 vue serve 啟動時，需在 App.vue 或 main.js 所在的目錄下啟動，此時不會以 根目錄下的 vue.config.js作為配置文件導致代理設置失敗。

因此在需要 設置代理 時應 在項目 根目錄 下 使用 npm run serve 的方式啟動

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

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。