Vue項(xiàng)目webpack打包部署到Tomcat刷新報(bào)404錯(cuò)誤問(wèn)題的解決方案
遇到的問(wèn)題
使用webpack打包vue后，將打包好的文件，發(fā)布到Tomcat上，訪問(wèn)成功，但是刷新后頁(yè)面報(bào)404錯(cuò)。
在網(wǎng)上查找了一下，原來(lái)是HTML5 History 模式引發(fā)的問(wèn)題，具體為什么，vue官方已經(jīng)給出了解釋?zhuān)憧梢钥?a rel="external nofollow">https://router.vuejs.org/zh-cn/essentials/history-mode.html
但是看完問(wèn)題又來(lái)了，官方給出的解決方案中沒(méi)有說(shuō)tomcat下，怎么決解。
解決方案
根據(jù)官方給出的解決方案原理
你要在服務(wù)端增加一個(gè)覆蓋所有情況的候選資源：如果 URL 匹配不到任何靜態(tài)資源，則應(yīng)該返回同一個(gè) index.html 頁(yè)面，這個(gè)頁(yè)面就是你 app 依賴(lài)的頁(yè)面。
所以在tomcat服務(wù)器下你可以這么做。在打包好的項(xiàng)目根目錄下新建一個(gè)WEB-INF文件夾，在WEB-INF中寫(xiě)一個(gè)web.xml。
web.xml中寫(xiě)：
<?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 頁(yè)面。
最后還需要配置一下你的route，配置一個(gè)覆蓋所有的路由情況，然后在給出一個(gè) 404 頁(yè)面。
const router = new VueRouter({
mode: 'history',
routes: [
{
path: '*',
component: (resolve) => require(['./views/error404.vue'], resolve)
}
]
})
總結(jié)
以上所述是小編給大家介紹的Vue項(xiàng)目webpack打包部署到Tomcat刷新報(bào)404錯(cuò)誤問(wèn)題的解決方案，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
相關(guān)文章
VUE實(shí)現(xiàn)Studio管理后臺(tái)之鼠標(biāo)拖放改變窗口大小
這篇文章主要介紹了VUE實(shí)現(xiàn)Studio管理后臺(tái)之鼠標(biāo)拖放改變窗口大小 的相關(guān)知識(shí)，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的工作或?qū)W習(xí)具有一定的參考價(jià)值,需要的朋友可以參考下2020-03-03
vue+css如何實(shí)現(xiàn)圓環(huán)漸變儀表盤(pán)
這篇文章主要介紹了vue+css如何實(shí)現(xiàn)圓環(huán)漸變儀表盤(pán)問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-08-08
vue返回上一頁(yè)面時(shí)不刷新問(wèn)題及解決方案
這篇文章主要介紹了vue返回上一頁(yè)面時(shí)不刷新問(wèn)題及解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-05-05
vue中使用better-scroll實(shí)現(xiàn)滑動(dòng)效果及注意事項(xiàng)
這篇文章主要介紹了vue中使用better-scroll實(shí)現(xiàn)滑動(dòng)效果，本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2018-11-11
本文通過(guò)圖文并茂的形式給大家介紹了Vue組件之自定義事件的功能,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下2018-02-02
vue-router是Vue.js官方的路由插件,它和vue.js是深度集成的,適合用于構(gòu)建單頁(yè)面應(yīng)用,下面這篇文章主要給大家介紹了關(guān)于降低vue-router版本的2種解決方法,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-07-07
vue自定義標(biāo)簽和單頁(yè)面多路由的實(shí)現(xiàn)代碼
這篇文章主要介紹了vue自定義標(biāo)簽和單頁(yè)面多路由的實(shí)現(xiàn)代碼，本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-05-05
本文主要介紹了nuxt.js框架使用小結(jié),文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-08-08
詳解Vue源碼學(xué)習(xí)之callHook鉤子函數(shù)
這篇文章主要介紹了詳解Vue源碼學(xué)習(xí)之callHook鉤子函數(shù)，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-07-07
vue中radio根據(jù)動(dòng)態(tài)值綁定checked無(wú)效的解決
這篇文章主要介紹了vue中radio根據(jù)動(dòng)態(tài)值綁定checked無(wú)效的解決，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-03-03