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