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