引言

項(xiàng)目使用的模板是element-template，由于業(yè)務(wù)需要，我將路由的hash模式更改為了history模式，然后在打包部署項(xiàng)目時(shí)就出現(xiàn)了問(wèn)題

個(gè)人發(fā)現(xiàn)是資源的訪問(wèn)路徑有問(wèn)題，在部署之后發(fā)現(xiàn)每次訪問(wèn)的js資源路徑前都會(huì)自動(dòng)攜帶上我路由的部分參數(shù)

經(jīng)過(guò)查閱資料后發(fā)現(xiàn)該問(wèn)題的發(fā)生與路由的兩種模式有關(guān)

遇到的問(wèn)題

問(wèn)題如下：

在我執(zhí)行npm run build:prod打包項(xiàng)目完成后，在本地打開(kāi)dist目錄下的index.html文件是無(wú)法打開(kāi)的，我試過(guò)將publicPath修改為./，修改后依舊無(wú)效

但是項(xiàng)目部署到服務(wù)器上后可以正常打開(kāi)，只是進(jìn)入頁(yè)面后在切換路由時(shí)會(huì)出現(xiàn)爆紅然后卡死（根據(jù)f12可以看出是訪問(wèn)js資源和css資源路徑有問(wèn)題）

問(wèn)題原因

大概原因就是路由的hash模式和history模式對(duì)路由方式的處理不一樣，所以導(dǎo)致我出現(xiàn)了這個(gè)問(wèn)題

解決問(wèn)題

1.將vue.config.js中的publicPath參數(shù)修改成了/，不能是./

2.在部署項(xiàng)目時(shí)在nginx中增加配置如下

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

3.最后部署訪問(wèn)后發(fā)現(xiàn)項(xiàng)目沒(méi)有問(wèn)題

• 注意：

如果項(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í)直接使用寶塔部署即可，無(wú)需配置其它

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è)參考，也希望大家多多支持腳本之家。

最新評(píng)論