Vue項(xiàng)目如何部署到Tomcat服務(wù)器上
1. 將項(xiàng)目打包
Vue中自帶webpack，可以通過(guò)一行命令將項(xiàng)目打包
# 執(zhí)行該命令打包 npm run build
2. 上傳相應(yīng)文件到服務(wù)器上
打包完成后，項(xiàng)目中會(huì)多出一個(gè)dist文件夾， 這個(gè)文件夾中就包含html、css、js等文件
直接將dist文件夾上傳到Tomcat的ROOT目錄下，默認(rèn)情況下，訪問(wèn)服務(wù)器網(wǎng)址會(huì)自動(dòng)定位到ROOT目錄下的index.html文件，如果是想要訪問(wèn)文件夾，原則上也放到這個(gè)目錄就可以了，
當(dāng)然，如果是war包則一定要放到webapps目錄下，tomcat會(huì)自動(dòng)解壓作為一個(gè)單獨(dú)的項(xiàng)目
原則上我們就可以通過(guò) http://ip地址/dist/index.html 來(lái)直接訪問(wèn)了，但是會(huì)有問(wèn)題~~
3. 匹配路由
考慮與Vue項(xiàng)目中設(shè)置的路由前綴匹配，將dist文件夾改個(gè)名字myspace，這樣我們?cè)谠L問(wèn) http://ip地址/myspace/ 的時(shí)候Vue中就會(huì)匹配myspace前綴，會(huì)直接定位到項(xiàng)目首頁(yè)，當(dāng)然不配置也沒(méi)關(guān)系，我們?cè)谠L問(wèn)資源的時(shí)候會(huì)直接跟在ip地址后面，感覺(jué)不太美觀
4. 頁(yè)面顯示錯(cuò)誤
訪問(wèn) http://ip地址/myspace/
控制臺(tái)報(bào)錯(cuò)：
可以看到是資源訪問(wèn)錯(cuò)誤，原因是Vue項(xiàng)目中訪問(wèn)資源是絕對(duì)路徑 /
解決方法就是將項(xiàng)目中的js目錄和css目錄移動(dòng)到ROOT目錄下，和myspace目錄同級(jí)
5. 再次訪問(wèn)
再訪問(wèn) http://ip地址/myspace/，記得刷新一下緩存 快捷鍵 Ctrl + Shift + R
發(fā)現(xiàn)可以直接定位到項(xiàng)目首頁(yè)，這樣就把Vue路由前綴和ROOT目錄下的項(xiàng)目文件夾名myspace統(tǒng)一起來(lái)了
你只管出發(fā)，旅途自有風(fēng)景~~
到此這篇關(guān)于將Vue項(xiàng)目部署到Tomcat服務(wù)器上（簡(jiǎn)單、粗暴）的文章就介紹到這了,更多相關(guān)Vue部署Tomcat服務(wù)器內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
解決Vue.js由于延時(shí)顯示了{(lán){message}}引用界面的問(wèn)題
今天小編就為大家分享一篇解決Vue.js由于延時(shí)顯示了{(lán){message}}引用界面的問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-08-08
使用Vue自定義指令實(shí)現(xiàn)Select組件
這篇文章主要介紹了使用Vue自定義指令實(shí)現(xiàn)Select組件,如果哪位朋友對(duì)vue自定義指令不是多了解的話，此篇文章會(huì)對(duì)你有所幫助的，需要的朋友可以參考下2018-05-05
深度解析Vue3動(dòng)態(tài)組件Component
Vue 提供了一個(gè)組件 component 標(biāo)簽來(lái)動(dòng)態(tài)的完成組件的切換,本文就來(lái)詳細(xì)的介紹一下Vue3動(dòng)態(tài)組件Component,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2026-03-03
Vue 實(shí)現(xiàn)復(fù)制功能,不需要任何結(jié)構(gòu)內(nèi)容直接復(fù)制方式
今天小編就為大家分享一篇Vue 實(shí)現(xiàn)復(fù)制功能,不需要任何結(jié)構(gòu)內(nèi)容直接復(fù)制方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-11-11
解決VueCil代理本地proxytable無(wú)效報(bào)錯(cuò)404的問(wèn)題
這篇文章主要介紹了解決VueCil代理本地proxytable無(wú)效報(bào)錯(cuò)404的問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-11-11
uniApp?h5項(xiàng)目如何通過(guò)命令行打包并生成指定路徑及文件名稱
用uni-app來(lái)寫安卓端,近日需要將程序打包為H5放到web服務(wù)器上,經(jīng)過(guò)一番折騰,這里給大家分享下,這篇文章主要給大家介紹了關(guān)于uniApp?h5項(xiàng)目如何通過(guò)命令行打包并生成指定路徑及文件名稱的相關(guān)資料,需要的朋友可以參考下2024-02-02
Vue3實(shí)現(xiàn)表單輸入的雙向綁定的示例代碼
Vue.js 是一個(gè)漸進(jìn)式的JavaScript框架,廣泛用于構(gòu)建交互式用戶界面,在 Vue 中,雙向綁定是一項(xiàng)非常核心的概念,尤其是在處理表單輸入時(shí),它使得數(shù)據(jù)和用戶界面之間的互動(dòng)變得簡(jiǎn)單又高效,在本篇博客中,我們將深入探討如何在 Vue 3 中實(shí)現(xiàn)表單輸入的雙向綁定2025-01-01
VUE div click無(wú)效的問(wèn)題及解決
這篇文章主要介紹了VUE div click無(wú)效的解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-01-01
vue響應(yīng)式系統(tǒng)之observe、watcher、dep的源碼解析
這篇文章主要介紹了vue響應(yīng)式系統(tǒng)之observe、watcher、dep的源碼解析，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2019-04-04
這篇文章主要介紹了vue實(shí)現(xiàn)登錄功能的步驟，幫助大家更好的理解和使用vue框架，感興趣的朋友可以了解下2020-12-12