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