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