vue項目如何部署運行到tomcat上
vue項目部署運行到tomcat上
使用webstrorm開發(fā)vue前端工程項目時，使用命令npm run dev開啟服務(wù)，可以通過訪問電腦IP:電腦端口實時預(yù)覽頁面，當(dāng)時我在想使用手機端來調(diào)試頁面時，發(fā)現(xiàn)即使手機與電腦處于同一局域網(wǎng)環(huán)境下，仍然無法訪問。
這就很奇怪了 ，平時只要我的電腦和手機處于同一局域網(wǎng)環(huán)境下，使用手機訪問電腦IP:電腦端口/項目名，就可以正常訪問，現(xiàn)在卻不行，結(jié)果去網(wǎng)上搜索，普遍的一個解決辦法是在webstorm中通過添加一個部署來使用的，就像是下圖一樣：
經(jīng)過了好一番折騰，發(fā)現(xiàn)手機端可以訪問電腦端的文件了，可是發(fā)現(xiàn)這是一個坑，這樣子設(shè)置了只是說手機可以訪問電腦當(dāng)前目錄的一些文件，對于靜態(tài)文件還好，但是這是一個服務(wù)，那就沒辦法了。
好了，閑話少敘，說一個我自己的解決方式：
解決方案
1.【修改index.js】
修改config目錄下的index.js，將assetsPublicPath: '/'改為assetsPublicPath: './'
注意：
有兩處，都要改，不然打包部署到tomcat上面訪問是一片空白；
還有一點需要注意的就是，
webstorm起服務(wù)時，需要改回來，不然也是不行的
2.【打包】
項目文件目錄下運行命令：npm run build，
將項目打包好，
然后當(dāng)前項目目錄下有一個dist文件夾，
該文件夾下有一個index.html和static文件夾
3.【tomcat部署】
現(xiàn)在，在tomcat的webapps文件夾下以項目名稱新建一個文件夾，
比如my_app，
然后將index.html和static文件夾復(fù)制到my_app文件夾下，
現(xiàn)在就可以啟動服務(wù)器了，訪問正常。
總結(jié)
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
Vue3學(xué)習(xí)筆記之依賴注入Provide/Inject
provide和inject可以實現(xiàn)嵌套組件之間進行傳遞數(shù)據(jù),這兩個函數(shù)都是在setup函數(shù)中使用的,下面這篇文章主要給大家介紹了關(guān)于Vue3學(xué)習(xí)筆記之依賴注入Provide?/?Inject的相關(guān)資料,需要的朋友可以參考下2023-05-05
這篇文章主要為大家詳細介紹了vue.js實現(xiàn)一個漂亮、靈活、可復(fù)用的提示組件，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-03-03
這篇文章主要介紹了vue實現(xiàn)商品加減計算總價的實例代碼,代碼簡單易懂，非常不錯，具有一定的參考借鑒價值，需要的朋友可以參考下2018-08-08
這篇文章主要為大家詳細介紹了前端框架Vue.js中Directive知識，感興趣的小伙伴們可以參考一下2016-09-09
Vue加載讀取本地txt/json等文件的實現(xiàn)方式
這篇文章主要介紹了Vue加載讀取本地txt/json等文件的實現(xiàn)方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10
本文主要介紹了vue中對token有效期的深入理解,文中通過示例代碼介紹的非常詳細,對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-07-07
快速解決Vue、element-ui的resetFields()方法重置表單無效的問題
這篇文章主要介紹了快速解決Vue、element-ui的resetFields()方法重置表單無效的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-08-08
這篇文章主要給大家介紹了關(guān)于vue打開新窗口并實現(xiàn)傳參的相關(guān)資料，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-03-03
這篇文章主要介紹了在vue項目中使用sass的配置方法,需要的朋友可以參考下2018-03-03
Vue.js?在其運行過程中會將模板編譯成虛擬?DOM?(VNode),然后再將?VNode?渲染成實際的?DOM?節(jié)點,這個過程是由?Vue?內(nèi)部的編譯器和渲染系統(tǒng)完成的,本文給大家介紹了Vue3中虛擬dom轉(zhuǎn)成真實dom的過程,需要的朋友可以參考下2024-09-09