vue-cli history模式實(shí)現(xiàn)tomcat部署報(bào)404的解決方式
vue-cli開(kāi)發(fā)過(guò)程中路由#不好看，去掉可使用history模式，開(kāi)發(fā)模式路徑訪(fǎng)問(wèn)都沒(méi)問(wèn)題，部署到服務(wù)器之后訪(fǎng)問(wèn)路徑時(shí)報(bào)404，這種情況需要配置服務(wù)器默認(rèn)訪(fǎng)問(wèn)路徑index.html.官網(wǎng)只提供了apache、nginx的配置方式，沒(méi)有tomcat的配置方式，下面以個(gè)例子來(lái)完成整個(gè)配置。
范例：vue-cli項(xiàng)目使用路由，tomcat作為服務(wù)器，項(xiàng)目文件夾名myvue
1.npm run build 打包生成的build文件夾中內(nèi)容拷貝到myvue文件夾如下圖：
2.myvue文件夾下新建WEB-INF/web.xml 其中添加404錯(cuò)誤跳轉(zhuǎn)路徑如下圖：
3.vue-cli項(xiàng)目config/index.js 配置assetsPublicPath:'/myvue/' 項(xiàng)目包名稱(chēng)
4.vue-cli項(xiàng)目src/router/index.js 配置mode:'history',base:'/myvue/'
以上vue-cli配置與tomcat部署都o(jì)k后，啟動(dòng)tomcat服務(wù)器，訪(fǎng)問(wèn)路徑項(xiàng)目名myvue，ok可以正確訪(fǎng)問(wèn)了，
如果不設(shè)置服務(wù)器的index.html，也可以直接在vue-cli項(xiàng)目src/router/index.js 里 path:'/myvue/order-search' 直接配置上包名也可以解決問(wèn)題
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
- vue+springboot項(xiàng)目上傳部署tomcat的方法實(shí)現(xiàn)
- vue項(xiàng)目如何部署運(yùn)行到tomcat上
- 解決Vue在Tomcat8下部署頁(yè)面不加載的問(wèn)題
- vue項(xiàng)目部署到nginx/tomcat服務(wù)器的實(shí)現(xiàn)
- Vue CLI3創(chuàng)建項(xiàng)目部署到Tomcat 使用ngrok映射到外網(wǎng)
- Vue項(xiàng)目webpack打包部署到Tomcat刷新報(bào)404錯(cuò)誤問(wèn)題的解決方案
- Vue項(xiàng)目如何部署到Tomcat服務(wù)器上
相關(guān)文章
vue3父子組件傳值中props使用細(xì)節(jié)淺析
這篇文章主要給大家介紹了關(guān)于vue3父子組件傳值中props使用細(xì)節(jié)的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2022-03-03
elementUI的table表格改變數(shù)據(jù)不更新問(wèn)題解決
最近在做vue的項(xiàng)目時(shí)發(fā)現(xiàn)了一個(gè)問(wèn)題，今天就來(lái)解決一下，本文主要介紹了elementUI的table表格改變數(shù)據(jù)不更新問(wèn)題解決，感興趣的可以了解一下2022-02-02
這篇文章主要介紹了Vue中使用eslint和editorconfig方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-05-05
Vue項(xiàng)目中keepAlive的使用說(shuō)明(超級(jí)實(shí)用版)
這篇文章主要介紹了Vue項(xiàng)目中keepAlive的使用說(shuō)明，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
詳解vue中在循環(huán)中使用@mouseenter 和 @mouseleave事件閃爍問(wèn)題解決方法
這篇文章主要介紹了詳解vue中在循環(huán)中使用@mouseenter 和 @mouseleave事件閃爍問(wèn)題解決方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-04-04
這篇文章主要為大家詳細(xì)介紹了vue組件學(xué)習(xí)教程，根據(jù)Vue官方文檔學(xué)習(xí)的筆記，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-09-09
vue使用websocket實(shí)現(xiàn)實(shí)時(shí)數(shù)據(jù)推送功能
這篇文章主要為大家詳細(xì)介紹了vue如何使用websocket實(shí)現(xiàn)實(shí)時(shí)數(shù)據(jù)推送,發(fā)布訂閱重連單點(diǎn)登錄功能,感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2023-12-12
這篇文章主要介紹了vue2.x引入threejs,如果在開(kāi)發(fā)過(guò)程中出現(xiàn)threejs生成的canvas出現(xiàn)外邊框,只需要用css樣式修改，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，需要的朋友可以參考下2022-09-09
Vuex處理用戶(hù)Token過(guò)期及優(yōu)化設(shè)置封裝本地存儲(chǔ)操作模塊
這篇文章主要為大家介紹了Vuex處理用戶(hù)Token優(yōu)化設(shè)置封裝本地存儲(chǔ)操作模塊及Token?過(guò)期問(wèn)題詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-09-09
這篇文章主要介紹了關(guān)于vue文件中index.vue的使用方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-10-10