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

vue在history模式下打包部署問題及解決方案

 更新時間：2025年03月31日 10:30:38   作者：愛學(xué)習(xí)的大雄  
這篇文章主要介紹了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：

  1. publicPath配置為./
  2. 打包完成后可以直接運行dist包下的index.html且有界面顯示
  3. 部署時直接使用寶塔部署即可，無需配置其它

history：

  1. publicPath配置為/或項目在服務(wù)器根下路徑
  2. 打包完成后不可直接運行dist包下的index.html，必須要部署到服務(wù)器才行
  3. 部署時還需要自己去配置nginx，實現(xiàn)服務(wù)端的映射
location / {
  try_files $uri $uri/ /index.html;
}

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

相關(guān)文章

最新評論