vue-cli history模式實(shí)現(xiàn)tomcat部署報(bào)404的解決方式
vue-cli開(kāi)發(fā)過(guò)程中路由#不好看，去掉可使用history模式，開(kāi)發(fā)模式路徑訪問(wèn)都沒(méi)問(wèn)題，部署到服務(wù)器之后訪問(wèn)路徑時(shí)報(bào)404，這種情況需要配置服務(wù)器默認(rèn)訪問(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)目包名稱
4.vue-cli項(xiàng)目src/router/index.js 配置mode:'history',base:'/myvue/'
以上vue-cli配置與tomcat部署都o(jì)k后，啟動(dòng)tomcat服務(wù)器，訪問(wèn)路徑項(xiàng)目名myvue，ok可以正確訪問(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)文章
Vue 組件組織結(jié)構(gòu)及組件注冊(cè)詳情
這篇文章主要介紹的是Vue 組件組織結(jié)構(gòu)及組件注冊(cè)，為了能在模板中使用，這些組件必須先注冊(cè)以便 Vue 能夠識(shí)別。這里有兩種組件的注冊(cè)類型：全局注冊(cè)和局部注冊(cè)。至此，我們的組件都只是通過(guò) Vue.component 全局注冊(cè)的，文章學(xué)詳細(xì)內(nèi)容,需要的朋友可以參考一下2021-10-10
跨域是指瀏覽器不能執(zhí)行其他網(wǎng)站的腳本,它是由瀏覽器的同源策略造成的,是瀏覽器對(duì)JavaScript實(shí)施的安全限制,下面這篇文章主要給大家介紹了關(guān)于Vite代理如何解決跨域問(wèn)題的相關(guān)資料,需要的朋友可以參考下2023-03-03
這篇文章主要介紹了VUE3頁(yè)面div如何點(diǎn)擊改變樣式問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03
vue中項(xiàng)目頁(yè)面空白但不報(bào)錯(cuò)產(chǎn)生的原因及分析
這篇文章主要介紹了vue中項(xiàng)目頁(yè)面空白但不報(bào)錯(cuò)產(chǎn)生的原因及分析，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-05-05
Vue2+SpringBoot實(shí)現(xiàn)數(shù)據(jù)導(dǎo)出到csv文件并下載的使用示例
本文主要介紹了Vue2+SpringBoot實(shí)現(xiàn)數(shù)據(jù)導(dǎo)出到csv文件并下載,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-10-10
vue學(xué)習(xí)筆記之給組件綁定原生事件操作示例
這篇文章主要介紹了vue學(xué)習(xí)筆記之給組件綁定原生事件操作,結(jié)合實(shí)例形式詳細(xì)分析了vue.js組件綁定原生事件相關(guān)原理、實(shí)現(xiàn)方法與操作注意事項(xiàng),需要的朋友可以參考下2020-02-02
這篇文章主要介紹了vue-cli-瀏覽器實(shí)現(xiàn)熱更新,最常用的是webpack-dev-server，它是一個(gè)小型的Node.js?Express服務(wù)器，它使用webpack-dev-middleware來(lái)服務(wù)于webpack的包，本文結(jié)合實(shí)例代碼介紹的非常詳細(xì)，需要的朋友參考下吧2024-03-03
VUE解決微信簽名及SPA微信invalid signature問(wèn)題(完美處理)
這篇文章主要介紹了VUE解決微信簽名及SPA微信invalid signature問(wèn)題(完美處理)，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2019-03-03
本篇文章主要介紹了詳解vue靜態(tài)資源打包中的坑與解決方案，本文主要解決路徑問(wèn)題，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-02-02
Vue3實(shí)現(xiàn)可視化拖拽標(biāo)簽小程序功能
這篇文章主要介紹了Vue3實(shí)現(xiàn)可視化拖拽標(biāo)簽小程序,實(shí)現(xiàn)功能可視化標(biāo)簽拖拽，雙擊標(biāo)簽可修改標(biāo)簽內(nèi)容，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，需要的朋友可以參考下2023-09-09