Vue项目上线后刷新报错404问题（apache，nginx，tomcat）
一、 Vue項(xiàng)目打包發(fā)布apache報(bào)錯(cuò)：
route，配置一個(gè)覆蓋所有的路由情況
1、需要修改router/index.js中new Router?配置，加一個(gè)base: '/htcm_front/', 它指定應(yīng)用的基路徑，該應(yīng)用是服務(wù)于localhost/htcm_front路徑下，所以必須加base配置，否則應(yīng)用會(huì)展示404頁面
2、需要修改config/index.js中build下的assetsPublicPath: '/htcm_front/'，如果用相對(duì)路徑，chunk文件會(huì)報(bào)錯(cuò)找不到。
3、將項(xiàng)目打包發(fā)布到apache的/var/www/html/下的htcm_front目錄(htcm_front是打包生成的目錄)
后端配置例子(apache配置文件):
4、修改httpd.conf文件，開啟rewrite_module功能。
??????? LoadModule rewrite_module libexec/apache2/mod_rewrite.so，去掉前面的#
5、找到AllowOverride None的那行，把它改成AllowOverride All，來使.htaccess文件生效。
6、在你的項(xiàng)目目錄下，也就是我的front目錄添加一個(gè).htaccess文件。
? Vim?? .htaccess
?#.htaccess內(nèi)容#
<IfModule mod_rewrite.c> RewriteEngine On? ?RewriteBase /
? ?RewriteRule ^index\.html$ - [L]
? ?RewriteCond %{REQUEST_FILENAME} !-f
? ?RewriteCond %{REQUEST_FILENAME} !-d
? ?RewriteRule . /htcm_front/index.html [L]
? ?</IfModule>
? ?注：/htcm_front/ index.html是你打包目錄的名字
? ?參考地址：https://segmentfault.com/a/1190000012548105
二、 Vue項(xiàng)目打包發(fā)布nginx報(bào)錯(cuò)：
(官方文檔也有介紹)
https://blog.csdn.net/tomcat_2014/article/details/53129796
#HTML5 History模式：
VUE-router默認(rèn)hash模式---使用URL的hash來模擬一個(gè)完整的URL，于是當(dāng)URL改變時(shí)，頁面不會(huì)重新加載。
如果不詳很丑的hash，我們可以使用路由的history模式，這種模式充分利用history.pushState? API來完成URL跳轉(zhuǎn)而無需重新加載頁面。
?
const route = new VueRouter({
?????? mode:‘history’,
routes: […]
}]
??? 當(dāng)你使用history模式時(shí)，URL就像正常的url，列入http://test.com/user/id。也好看。
這種模式還需要后臺(tái)支持，因?yàn)槲覀兊囊蛟撌莻€(gè)單頁客戶端應(yīng)用，如果后臺(tái)沒有正確配置，當(dāng)用戶瀏覽時(shí)就會(huì)返回404。
所以，你要在服務(wù)端增加一個(gè)覆蓋所有情況的候選資源：如果URL匹配不到任何靜態(tài)資源，則因該返回同一個(gè)index.html，這個(gè)頁面就是你app依賴的頁面。
后端配置例子，修改nginx配置文件:
?
?
?
這里配置location的時(shí)候要注意一下：
root寫自己tomcat/webapps的路徑
proxy_pass 寫跳轉(zhuǎn)后的地址，比如我這里是ip地址:端口號(hào) ，注意后面不要加
這么寫之后，就能實(shí)現(xiàn)vue的刷新功能了。
附Nginx常用命令：
啟動(dòng)
./nginx?
檢查 nginx.conf配置文件
./nginx -t
重啟
./nginx -s reload
停止
./nginx -s stop
三、Vue項(xiàng)目打包發(fā)布tomcat報(bào)錯(cuò)：
遇到的問題：
使用webpack打包vue后，將打包好的文件，發(fā)布到Tomcat上，訪問成功，但是刷新后頁面報(bào)404錯(cuò)。
在網(wǎng)上查找了一下，原來是HTML5 History 模式引發(fā)的問題，具體為什么，vue官方已經(jīng)給出了解釋，你可以看https://router.vuejs.org/zh-cn/essentials/history-mode.html
但是看完問題又來了，官方給出的解決方案中沒有說tomcat下，怎么決解。
?解決方案：
根據(jù)官方給出的解決方案原理
你要在服務(wù)端增加一個(gè)覆蓋所有情況的候選資源：如果 URL 匹配不到任何靜態(tài)資源，則應(yīng)該返回同一個(gè) index.html 頁面，這個(gè)頁面就是你 app 依賴的頁面。
所以在tomcat服務(wù)器下你可以這么做。在打包好的項(xiàng)目根目錄下新建一個(gè)WEB-INF文件夾，在WEB-INF中寫一個(gè)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>
?
?
?
這樣的目的就是一旦出現(xiàn)404就返回到 index.html 頁面。
最后還需要配置一下你的route，配置一個(gè)覆蓋所有的路由情況，然后在給出一個(gè) 404 頁面。
const router = new VueRouter({
?mode: 'history',
?routes: [
??{
????path: '*',
????component: (resolve) => require(['./views/error404.vue'], resolve)
??}
?]
})
以上所述是小編給大家介紹的Vue項(xiàng)目webpack打包部署到apache，nginx，tomcat刷新報(bào)404錯(cuò)誤問題的解決方案，希望能幫助到您。
總結(jié)
以上是生活随笔為你收集整理的Vue项目上线后刷新报错404问题（apache，nginx，tomcat）的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： [POJ2352] Stars 夜空星辰
- 下一篇： html5倒计时秒杀怎么做,vue 设