proxyTable:{
      // 匹配 /dev-api 開頭的請(qǐng)求， 比如：A網(wǎng)站：https://localhost:8888 中的index.html 頁(yè)面發(fā)送AJax請(qǐng)求：/dev-api/data.json
      'dev-api': {
        target:'http://localhost:3001',
        // 開啟代理：在本地會(huì)創(chuàng)建一個(gè)虛擬服務(wù)端，然后發(fā)送請(qǐng)求的數(shù)據(jù)，
        // 并同時(shí)接收請(qǐng)求的數(shù)據(jù)，這樣服務(wù)端和服務(wù)端進(jìn)行數(shù)據(jù)的交互就不會(huì)有跨域問(wèn)題
        changOrigin: true, //開啟代理
        pathRewrite: {
            "^/dev-api": ''
        }
      }
    },

運(yùn)行后發(fā)現(xiàn)報(bào)錯(cuò)404

在這里插入圖片描述

測(cè)試后端接口無(wú)問(wèn)題，著重看代理部分代碼，百度后發(fā)現(xiàn) “dev-api"前面應(yīng)加”/"，

否則會(huì)出現(xiàn)上述錯(cuò)誤。

完整代碼如下：

proxyTable:{
      // 匹配 /dev-api 開頭的請(qǐng)求， 比如：A網(wǎng)站：https://localhost:8888 中的index.html 頁(yè)面發(fā)送AJax請(qǐng)求：/dev-api/data.json
      '/dev-api': {
        target:'http://localhost:3001',
        // 開啟代理：在本地會(huì)創(chuàng)建一個(gè)虛擬服務(wù)端，然后發(fā)送請(qǐng)求的數(shù)據(jù)，
        // 并同時(shí)接收請(qǐng)求的數(shù)據(jù)，這樣服務(wù)端和服務(wù)端進(jìn)行數(shù)據(jù)的交互就不會(huì)有跨域問(wèn)題
        changOrigin: true, //開啟代理
        pathRewrite: {
            "^/dev-api": ''
        }
      }
    },

除此之外，修改代理后應(yīng)重啟一下，否則修改內(nèi)容不生效。

vue配置代理方式

正向代理配置

環(huán)境配置文件 .env.development

ENV = 'development'
VUE_APP_BASE_API="/dev-api"

vue配置文件 vue.config.js

devServer: {
? ? proxy:'http://localhost:8080'//所有的接口請(qǐng)求都會(huì)被代理到這個(gè)路徑上
},
devServer: {
? ? proxy:{
? ? ? ? '/dev-api':{//只要是這個(gè)路徑下的請(qǐng)求都會(huì)被代理到target中
? ? ? ? ? ? target:'http://localhost:8888',
? ? ? ? ? ? pathRewrite:{'^/dev-api':''}//路徑重寫：/dev-api路徑將不會(huì)出現(xiàn)，如果改成'^/dev-api':'test'，則重寫的路徑/dev-api會(huì)變成test
? ? ? ? }
? ? }
},

注意點(diǎn)：使用正向代理時(shí)，不要手動(dòng)的寫全路徑，不要手動(dòng)的寫全路徑，不要手動(dòng)的寫全路徑，（重要的事情說(shuō)三遍）寫了全路徑則代理失效

全路徑：http://localhost:8080 即：協(xié)議、域名、端口

只要寫一個(gè)代理路徑即可：VUE_APP_BASE_API =/dev-api

環(huán)境變量配置文件

你可以在你的項(xiàng)目根目錄中放置下列文件來(lái)指定環(huán)境變量：

.env ? ? ? ? ? ? ? ?# 在所有的環(huán)境中被載入
.env.local ? ? ? ? ?# 在所有的環(huán)境中被載入，但會(huì)被 git 忽略
.env.[mode] ? ? ? ? # 只在指定的模式中被載入
.env.[mode].local ? # 只在指定的模式中被載入，但會(huì)被 git 忽略
# mode 代表環(huán)境變量：development、production和test。不同的文件名在不同的環(huán)境下自動(dòng)生效

請(qǐng)注意，只有 NODE_ENV，BASE_URL 和以 VUE_APP_ 開頭的變量將通過(guò) webpack.DefinePlugin 靜態(tài)地嵌入到客戶端側(cè)的代碼中。

這是為了避免意外公開機(jī)器上可能具有相同名稱的私鑰。