nginx處理vue打包檔案後的跨域問題

2022-07-09 20:36:10 字數 1564 閱讀 5387

在vue檔案打包後,專案脫離了vue配置的反向**配置,還是會報跨域的錯誤,或者直接打不開本地檔案,

但是此刻我們想開啟打包後的檔案,測試一下檔案有沒有錯誤,因為經常會存在開發階段沒有問題,打包後專案就各種問題,此時我們可以利用nginx處理跨域,其實vue配置也是利用的這個

在vue專案檔案中也是利用反向**處理的

proxytable: }},

在vue請求介面時

this.$axios.post("/preexam/api/user/login/system", {}).then(res => ).catch(function (error) );
此時vue在開發階段執行後就處理了跨域問題,但是打包後的檔案還是存在跨域,接下來我們利用nginx處理

解壓後的檔案找到下圖

}如圖修改

第一處修改是你要開啟的埠號

第二處修改是你打包後的檔案位址

第三處修改是vue**的介面位址

必須注意的問題

不要在後面加注釋 否則可能會啟動不了nginx

每一次啟動要把前一次的nginx的程序關掉

啟動雙擊exe檔案

執行你修改的埠位址

成功執行打包的檔案,並且有資料解決了跨域

完美執行 結束

要命系列 執行vue打包後的檔案

如何執行打包後的dist檔案看看效果,比如路徑什麼的有沒有問題之類的,那就需要在部署前看看頁面有沒有崩壞。廢話不多說,看圖 ps本人用的是vue cli4 首先npm install g serve 全域性安裝 如果你網速不大好,用 映象cnpm安裝也可以 再來就是在這一級目錄下直接serve s ...

vue打包後顯示空白正確處理方法

因為index.html裡邊的內容都是通過script標籤引入的,而你的路徑不對,開啟肯定是空白的。只要修改config資料夾裡的index.js裡的assetspublicpath的值 assetspublicpath預設的是 也就是根目錄。而我們的index.html和static在同一級目錄下...

Vue打包上線後的跨域問題處理

由於開發環境和生產環境的不同,會導致vue訪問出現跨域的問題。1.config index.js檔案配置 找到proxytable欄位,如下面一樣配置dev yyy 配置好後 訪問的url就不用再其他地方帶上網域名稱了。這個只適合開發環境使用,因為開發環境的本地伺服器,以及做好了 的功能,無需去多餘...