由于之前一直用hash路由，基本上沒什么坑莫瞬，這次由于一些特殊原因儡蔓，項目得采用history路由，在開發(fā)的時候基本沒什么問題疼邀，當項目做完后喂江，發(fā)布到服務(wù)器的時候就有問題，首先是頁面空白旁振，然后是刷新或直接訪問頁面時出現(xiàn)404錯誤获询。下面就這兩個問題來總結(jié)一下。
1.頁面空白
頁面空白的問題主要是因為沒有把項目部署在服務(wù)器的根目錄上拐袜，導(dǎo)致無法訪問吉嚣。如果不部署在根目錄下，需要設(shè)置以下幾個配置蹬铺。
修改vue.config.js 文件
module.exports = {
publicPath: '/web-form/',
outputDir: 'web-form'
}
web-form為項目部署的名稱尝哆。
修改router.js
const router = new VueRouter({
mode: 'history',
base: '/web-form/',
routes
})
配置base為項目的部署名稱。
2.404錯誤
404錯誤需要修改服務(wù)器配置甜攀。下面主要介紹下tomcat和Nginx的配置方式秋泄。
tomcat
在部署包文件夾下創(chuàng)建WEB-INF,然后創(chuàng)建web.xml文件，如下所示：
<?xml version="1.0" encoding="UTF-8"?>
<web-app
xmlns="http://xmlns.jcp.org/xml/ns/javaee"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_3_1.xsd" version="3.1" metadata-complete="true">
<display-name>Router for Tomcat</display-name>
<error-page>
<error-code>404</error-code>
<location>/index.html</location>
</error-page>
</web-app>
Nginx
修改nginx.conf文件
location /web-form {
index index.html index.htm;
try_files $uri $uri/ /web-form/;
}
