Vue項目如何部署到Tomcat服務器上
1. 將項目打包
Vue中自帶webpack，可以通過一行命令將項目打包
# 執(zhí)行該命令打包 npm run build
2. 上傳相應文件到服務器上
打包完成后，項目中會多出一個dist文件夾， 這個文件夾中就包含html、css、js等文件
直接將dist文件夾上傳到Tomcat的ROOT目錄下，默認情況下，訪問服務器網址會自動定位到ROOT目錄下的index.html文件，如果是想要訪問文件夾，原則上也放到這個目錄就可以了，
當然，如果是war包則一定要放到webapps目錄下，tomcat會自動解壓作為一個單獨的項目
原則上我們就可以通過 http://ip地址/dist/index.html 來直接訪問了，但是會有問題~~
3. 匹配路由
考慮與Vue項目中設置的路由前綴匹配，將dist文件夾改個名字myspace，這樣我們在訪問 http://ip地址/myspace/ 的時候Vue中就會匹配myspace前綴，會直接定位到項目首頁，當然不配置也沒關系，我們在訪問資源的時候會直接跟在ip地址后面，感覺不太美觀
4. 頁面顯示錯誤
訪問 http://ip地址/myspace/
控制臺報錯：
可以看到是資源訪問錯誤，原因是Vue項目中訪問資源是絕對路徑 /
解決方法就是將項目中的js目錄和css目錄移動到ROOT目錄下，和myspace目錄同級
5. 再次訪問
再訪問 http://ip地址/myspace/，記得刷新一下緩存 快捷鍵 Ctrl + Shift + R
發(fā)現可以直接定位到項目首頁，這樣就把Vue路由前綴和ROOT目錄下的項目文件夾名myspace統(tǒng)一起來了
你只管出發(fā)，旅途自有風景~~
到此這篇關于將Vue項目部署到Tomcat服務器上（簡單、粗暴）的文章就介紹到這了,更多相關Vue部署Tomcat服務器內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
這篇文章主要介紹了vue跨域解決方法 ,需要的朋友可以參考下2017-10-10
雖然已經擯棄ie的使用,但是在現階段還是在某些場景下需要用到ie,這篇文章主要給大家介紹了關于vue2項目解決IE、360瀏覽器兼容問題的辦法,文中通過代碼介紹的非常詳細,需要的朋友可以參考下2024-09-09
這篇文章主要介紹了vue中使用rem布局的兩種方法小結，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-07-07
本文介紹了如何使用Vue 3編寫一個帶提示的表格組件,并假設每行都有一個保存按鈕,如果需要全部保存,還會加上驗證,感興趣的朋友一起看看吧2025-02-02
這篇文章主要介紹了vue調用原生方法交互，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09
這篇文章主要介紹了Vue實現input寬度隨文字長度自適應操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-07-07
解決vue 使用setTimeout,離開當前路由setTimeout未銷毀的問題
這篇文章主要介紹了解決vue 使用setTimeout,離開當前路由setTimeout未銷毀的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-07-07
Vue循環(huán)組件加validate多表單驗證的實例
今天小編就為大家分享一篇Vue循環(huán)組件加validate多表單驗證的實例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
解決vue?vite啟動項目報錯ERROR:?Unexpected?“\x88“?in?JSON?的問題
這篇文章主要介紹了vue?vite啟動項目報錯ERROR:?Unexpected?“\x88“?in?JSON?原因,本文給出出現此類問題的原因所在并給出解決方法，需要的朋友可以參考下2022-09-09
本篇文章主要介紹了詳解基于vue-cli配置移動端自適應，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-01-01