欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

vue設(shè)置代理不起作用問題及解決

 更新時(shí)間:2022年05月12日 15:56:26   作者:姜意%  
這篇文章主要介紹了vue設(shè)置代理不起作用問題及解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教

vue設(shè)置代理不起作用

使用vue寫前端界面時(shí),需調(diào)用后端接口展現(xiàn)查詢的數(shù)據(jù),于是設(shè)置代理實(shí)現(xiàn)跨域,在config/index.js中添加代理,代碼如下:

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ì)有跨域問題
        changOrigin: true, //開啟代理
        pathRewrite: {
            "^/dev-api": ''
        }
      }
    },

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

在這里插入圖片描述

測(cè)試后端接口無(wú)問題,著重看代理部分代碼,百度后發(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ì)有跨域問題
        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_ 開頭的變量將通過 webpack.DefinePlugin 靜態(tài)地嵌入到客戶端側(cè)的代碼中。

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

目錄

.env.production//生產(chǎn)環(huán)境配置
.env.develoption//開發(fā)環(huán)境配置

以上為個(gè)人經(jīng)驗(yàn),希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。

相關(guān)文章

  • 在vue中對(duì)數(shù)組值變化的監(jiān)聽與重新響應(yīng)渲染操作

    在vue中對(duì)數(shù)組值變化的監(jiān)聽與重新響應(yīng)渲染操作

    這篇文章主要介紹了在vue中對(duì)數(shù)組值變化的監(jiān)聽與重新響應(yīng)渲染操作,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來(lái)看看吧
    2020-07-07
  • vue-cli4使用全局less文件中的變量配置操作

    vue-cli4使用全局less文件中的變量配置操作

    這篇文章主要介紹了vue-cli4使用全局less文件中的變量配置操作,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來(lái)看看吧
    2020-10-10
  • vue實(shí)現(xiàn)搜索過濾效果

    vue實(shí)現(xiàn)搜索過濾效果

    這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)搜索過濾效果,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2019-05-05
  • vue-devtools 打開源碼位置實(shí)現(xiàn)過程

    vue-devtools 打開源碼位置實(shí)現(xiàn)過程

    這篇文章主要為大家介紹了vue-devtools 打開源碼位置實(shí)現(xiàn)過程詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
    2022-09-09
  • vue.js刪除列表中的一行

    vue.js刪除列表中的一行

    這篇文章給大家分享了vue.js刪除列表中的一行的實(shí)例操作以及代碼分享,有興趣的朋友參考下。
    2018-06-06
  • vue生命周期beforeDestroy和destroyed調(diào)用方式

    vue生命周期beforeDestroy和destroyed調(diào)用方式

    這篇文章主要介紹了vue生命周期beforeDestroy和destroyed調(diào)用方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2022-06-06
  • 基于vue-seamless-scroll實(shí)現(xiàn)無(wú)縫滾動(dòng)效果

    基于vue-seamless-scroll實(shí)現(xiàn)無(wú)縫滾動(dòng)效果

    這篇文章主要為大家詳細(xì)介紹了基于vue-seamless-scroll實(shí)現(xiàn)無(wú)縫滾動(dòng)效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2022-04-04
  • vue如何動(dòng)態(tài)實(shí)時(shí)的顯示時(shí)間淺析

    vue如何動(dòng)態(tài)實(shí)時(shí)的顯示時(shí)間淺析

    這篇文章主要給大家介紹了關(guān)于vue如何動(dòng)態(tài)實(shí)時(shí)的顯示時(shí)間,以及vue時(shí)間戳 獲取本地時(shí)間實(shí)時(shí)更新的相關(guān)資料,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
    2021-05-05
  • Vite圖片資源打包優(yōu)化的實(shí)現(xiàn)

    Vite圖片資源打包優(yōu)化的實(shí)現(xiàn)

    本文主要介紹了Vite圖片資源打包優(yōu)化的實(shí)現(xiàn),文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
    2023-04-04
  • 如何測(cè)量vue應(yīng)用運(yùn)行時(shí)的性能

    如何測(cè)量vue應(yīng)用運(yùn)行時(shí)的性能

    這篇文章主要介紹了如何測(cè)量vue應(yīng)用運(yùn)行時(shí)的性能,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,,需要的朋友可以參考下
    2019-06-06

最新評(píng)論