vue在history模式下打包部署問題及解決方案
引言
項目使用的模板是element-template，由于業(yè)務(wù)需要，我將路由的hash模式更改為了history模式，然后在打包部署項目時就出現(xiàn)了問題
個人發(fā)現(xiàn)是資源的訪問路徑有問題，在部署之后發(fā)現(xiàn)每次訪問的js資源路徑前都會自動攜帶上我路由的部分參數(shù)
經(jīng)過查閱資料后發(fā)現(xiàn)該問題的發(fā)生與路由的兩種模式有關(guān)
遇到的問題
問題如下：
在我執(zhí)行npm run build:prod打包項目完成后，在本地打開dist目錄下的index.html文件是無法打開的，我試過將publicPath修改為./，修改后依舊無效
但是項目部署到服務(wù)器上后可以正常打開，只是進入頁面后在切換路由時會出現(xiàn)爆紅然后卡死（根據(jù)f12可以看出是訪問js資源和css資源路徑有問題）
問題原因
大概原因就是路由的hash模式和history模式對路由方式的處理不一樣，所以導(dǎo)致我出現(xiàn)了這個問題
解決問題
1.將vue.config.js中的publicPath參數(shù)修改成了/，不能是./
2.在部署項目時在nginx中增加配置如下
location / {
try_files $uri $uri/ /index.html;
}3.最后部署訪問后發(fā)現(xiàn)項目沒有問題
- 注意：
如果項目不是部署在服務(wù)器的根路徑下，在路由的配置位置需要加上base: /包的位置/，同時vue.config.js中的publicPath參數(shù)也需要設(shè)置成這個
- 示例：
項目部署在服務(wù)器的vue包下,那么路由配置中需要加base: /vue/，publicPath需要設(shè)置成/vue/
總結(jié)
路由的hash模式與history模式打包時差異如下，
hash：
- publicPath配置為
./ - 打包完成后
可以直接運行dist包下的index.html且有界面顯示 - 部署時直接使用寶塔部署即可，無需配置其它
history：
- publicPath配置為
/或項目在服務(wù)器根下路徑 - 打包完成后
不可直接運行dist包下的index.html，必須要部署到服務(wù)器才行 - 部署時還需要自己去配置nginx，實現(xiàn)服務(wù)端的映射
location / {
try_files $uri $uri/ /index.html;
}以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
Vue3發(fā)送post請求出現(xiàn)400?Bad?Request報錯的解決辦法
這篇文章主要給大家介紹了關(guān)于Vue3發(fā)送post請求出現(xiàn)400?Bad?Request報錯的解決辦法,文中通過實例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2023-02-02
vue2引入Three.js預(yù)覽3D文件的實現(xiàn)方法
three.js是一個基于WebGL的JavaScript庫,它允許開發(fā)者在網(wǎng)頁上創(chuàng)建和顯示3D圖形,這篇文章主要介紹了vue2引入Three.js預(yù)覽3D文件的實現(xiàn)方法,文中通過代碼介紹的非常詳細,需要的朋友可以參考下2025-10-10
本篇文章主要介紹了vue.js 獲取當前自定義屬性值，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-06-06
這篇文章主要為大家詳細介紹了vue實現(xiàn)多級側(cè)邊欄的封裝，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-07-07
Vue中對iframe實現(xiàn)keep alive無刷新的方法
這篇文章主要介紹了Vue中對iframe實現(xiàn)keep alive無刷新的方法，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-07-07
這篇文章主要介紹了vue實現(xiàn)菜單權(quán)限控制的示例代碼，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2021-03-03
這篇文章主要給大家介紹了關(guān)于Vite版本更新檢查實現(xiàn)頁面自動刷新的解決思路,文中通過實例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2023-02-02
vue-cli 2.*中導(dǎo)入公共less文件的方法步驟
這篇文章主要介紹了vue-cli 2.*中導(dǎo)入公共less文件的方法步驟，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-11-11
Electron也可以快速地將你的網(wǎng)站打包成一個原生應(yīng)用發(fā)布,下面這篇文章主要給大家介紹了關(guān)于Electron集成React和Vue的相關(guān)資料,文中通過示例代碼介紹的非常詳細,需要的朋友可以參考下2022-08-08
圖片壓縮是一種比較便捷的壓縮方式,本文主要介紹了vue3中實現(xiàn)圖片壓縮的示例代碼,文中通過示例代碼介紹的非常詳細,需要的朋友們下面隨著小編來一起學習學習吧2024-02-02