Vue項目webpack打包部署到Tomcat刷新報404錯誤問題的解決方案
更新時間：2018年05月15日 10:57:14 投稿：mrr
今天很郁悶，遇到這樣一個奇葩問題，使用webpack打包vue后，將打包好的文件，發(fā)布到Tomcat上，訪問成功，但是刷新后頁面報404錯誤，折騰半天才解決好，下面小編把Vue項目webpack打包部署到Tomcat刷新報404錯誤問題的解決方案分享給大家，需要的朋友一起看看吧
遇到的問題
使用webpack打包vue后，將打包好的文件，發(fā)布到Tomcat上，訪問成功，但是刷新后頁面報404錯。
在網(wǎng)上查找了一下，原來是HTML5 History 模式引發(fā)的問題，具體為什么，vue官方已經(jīng)給出了解釋，你可以看https://router.vuejs.org/zh-cn/essentials/history-mode.html
但是看完問題又來了，官方給出的解決方案中沒有說tomcat下，怎么決解。
解決方案
根據(jù)官方給出的解決方案原理
你要在服務(wù)端增加一個覆蓋所有情況的候選資源：如果 URL 匹配不到任何靜態(tài)資源，則應(yīng)該返回同一個 index.html 頁面，這個頁面就是你 app 依賴的頁面。
所以在tomcat服務(wù)器下你可以這么做。在打包好的項目根目錄下新建一個WEB-INF文件夾，在WEB-INF中寫一個web.xml。
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，配置一個覆蓋所有的路由情況，然后在給出一個 404 頁面。
const router = new VueRouter({
mode: 'history',
routes: [
{
path: '*',
component: (resolve) => require(['./views/error404.vue'], resolve)
}
]
})
總結(jié)
以上所述是小編給大家介紹的Vue項目webpack打包部署到Tomcat刷新報404錯誤問題的解決方案，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
相關(guān)文章
Vue3之路由的query參數(shù)和params參數(shù)用法
這篇文章主要介紹了Vue3之路由的query參數(shù)和params參數(shù)用法,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03
這篇文章主要為大家詳細介紹了vue實現(xiàn)放大縮小拖拽功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-05-05
這篇文章主要為大家介紹了封裝一個更易用的Dialog組件過程詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-05-05
這篇文章主要介紹了vue打包添加gzip配置項方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-08-08
這篇文章主要介紹了Vue將props值實時傳遞 并可修改的操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-08-08
本文將結(jié)合實例代碼，解決Vue+SpringBoot+Shiro跨域問題，相信大家剛開始做都會遇到這個問題，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-06-06
這篇文章主要給大家介紹了關(guān)于uniapp中app與webview通訊的相關(guān)資料,這里的通信主要是打包APP端和web-view內(nèi)嵌網(wǎng)頁的雙向通信,文中通過代碼介紹的非常詳細,需要的朋友可以參考下2024-03-03
全局指令是Vue.js中的一種自定義指令,可以在整個應(yīng)用中重復(fù)使用,通過Vue.directive方法定義,可以在組件內(nèi)部直接使用,指令有多個生命周期鉤子,可以接收參數(shù)和修飾符,提高代碼復(fù)用性和可維護性,本文介紹vue全局指令文件directives,感興趣的朋友一起看看吧2025-02-02
這篇文章主要介紹了詳解Vue.js3.0 組件是如何渲染為DOM的 ，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-11-11
vue-element-admin如何從mock數(shù)據(jù)過渡到使用后臺接口
這篇文章主要介紹了vue-element-admin如何從mock數(shù)據(jù)過渡到使用后臺接口問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-04-04