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