vue項(xiàng)目如何部署運(yùn)行到tomcat上
vue項(xiàng)目部署運(yùn)行到tomcat上
使用webstrorm開發(fā)vue前端工程項(xiàng)目時，使用命令npm run dev開啟服務(wù)，可以通過訪問電腦IP:電腦端口實(shí)時預(yù)覽頁面，當(dāng)時我在想使用手機(jī)端來調(diào)試頁面時，發(fā)現(xiàn)即使手機(jī)與電腦處于同一局域網(wǎng)環(huán)境下，仍然無法訪問。
這就很奇怪了 ，平時只要我的電腦和手機(jī)處于同一局域網(wǎng)環(huán)境下，使用手機(jī)訪問電腦IP:電腦端口/項(xiàng)目名，就可以正常訪問，現(xiàn)在卻不行，結(jié)果去網(wǎng)上搜索，普遍的一個解決辦法是在webstorm中通過添加一個部署來使用的，就像是下圖一樣：
經(jīng)過了好一番折騰，發(fā)現(xiàn)手機(jī)端可以訪問電腦端的文件了，可是發(fā)現(xiàn)這是一個坑，這樣子設(shè)置了只是說手機(jī)可以訪問電腦當(dāng)前目錄的一些文件，對于靜態(tài)文件還好，但是這是一個服務(wù)，那就沒辦法了。
好了，閑話少敘，說一個我自己的解決方式：
解決方案
1.【修改index.js】
修改config目錄下的index.js，將assetsPublicPath: '/'改為assetsPublicPath: './'
注意：
有兩處，都要改，不然打包部署到tomcat上面訪問是一片空白；
還有一點(diǎn)需要注意的就是，
webstorm起服務(wù)時，需要改回來，不然也是不行的
2.【打包】
項(xiàng)目文件目錄下運(yùn)行命令：npm run build，
將項(xiàng)目打包好，
然后當(dāng)前項(xiàng)目目錄下有一個dist文件夾，
該文件夾下有一個index.html和static文件夾
3.【tomcat部署】
現(xiàn)在，在tomcat的webapps文件夾下以項(xiàng)目名稱新建一個文件夾，
比如my_app，
然后將index.html和static文件夾復(fù)制到my_app文件夾下，
現(xiàn)在就可以啟動服務(wù)器了，訪問正常。
總結(jié)
以上為個人經(jīng)驗(yàn)，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
關(guān)于Vue Router的10條高級技巧總結(jié)
這篇文章主要給大家總結(jié)介紹了關(guān)于Vue Router的10條高級技巧，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-05-05
這篇文章主要介紹了vuex中g(shù)etters的基本用法，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09
這篇文章主要介紹了vue中使用ueditor富文本編輯器的相關(guān)資料,需要的朋友可以參考下2018-02-02
vue-cli如何快速構(gòu)建vue項(xiàng)目
本篇文章主要介紹了vue-cli如何快速構(gòu)建vue項(xiàng)目，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-04-04
Vue如何給組件添加點(diǎn)擊事件?@click.native
這篇文章主要介紹了Vue如何給組件添加點(diǎn)擊事件?@click.native，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-10-10
這篇文章主要介紹了vue3 $attrs和inheritAttrs的用法說明，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
這篇文章主要介紹了vue中的row布局靠右對齊,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03
這篇文章主要介紹了初試vue-cli使用HBuilderx打包app的坑，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-07-07
vue中如何實(shí)現(xiàn)拖拽調(diào)整順序功能
這篇文章主要介紹了vue中如何實(shí)現(xiàn)拖拽調(diào)整順序功能問題，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-05-05
這篇文章主要為大家詳細(xì)介紹了如何利用Vue實(shí)現(xiàn)向PDF文件中添加二維碼的功能，文中的示例代碼講解詳細(xì)，感興趣的小伙伴可以了解一下2023-06-06