引言

項(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模式對路由方式的處理不一樣，所以導(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：

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

history：

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

location / {
  try_files $uri $uri/ /index.html;
}

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

最新評論