欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

vue項(xiàng)目如何部署運(yùn)行到tomcat上

 更新時(shí)間:2024年01月10日 09:45:25   作者:kkorkk  
這篇文章主要介紹了vue項(xiàng)目如何部署運(yùn)行到tomcat上的問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教

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

    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-05
  • vue.js的提示組件

    vue.js的提示組件

    這篇文章主要為大家詳細(xì)介紹了vue.js實(shí)現(xiàn)一個(gè)漂亮、靈活、可復(fù)用的提示組件,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2017-03-03
  • vue實(shí)現(xiàn)商品加減計(jì)算總價(jià)的實(shí)例代碼

    vue實(shí)現(xiàn)商品加減計(jì)算總價(jià)的實(shí)例代碼

    這篇文章主要介紹了vue實(shí)現(xiàn)商品加減計(jì)算總價(jià)的實(shí)例代碼,代碼簡(jiǎn)單易懂,非常不錯(cuò),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
    2018-08-08
  • 前端框架Vue.js中Directive知識(shí)詳解

    前端框架Vue.js中Directive知識(shí)詳解

    這篇文章主要為大家詳細(xì)介紹了前端框架Vue.js中Directive知識(shí),感興趣的小伙伴們可以參考一下
    2016-09-09
  • Vue加載讀取本地txt/json等文件的實(shí)現(xiàn)方式

    Vue加載讀取本地txt/json等文件的實(shí)現(xiàn)方式

    這篇文章主要介紹了Vue加載讀取本地txt/json等文件的實(shí)現(xiàn)方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2023-10-10
  • vue中對(duì)token有效期的深入理解

    vue中對(duì)token有效期的深入理解

    本文主要介紹了vue中對(duì)token有效期的深入理解,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2023-07-07
  • 快速解決Vue、element-ui的resetFields()方法重置表單無效的問題

    快速解決Vue、element-ui的resetFields()方法重置表單無效的問題

    這篇文章主要介紹了快速解決Vue、element-ui的resetFields()方法重置表單無效的問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧
    2020-08-08
  • vue打開新窗口并實(shí)現(xiàn)傳參的圖文實(shí)例

    vue打開新窗口并實(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-03
  • 在vue項(xiàng)目中使用sass的配置方法

    在vue項(xiàng)目中使用sass的配置方法

    這篇文章主要介紹了在vue項(xiàng)目中使用sass的配置方法,需要的朋友可以參考下
    2018-03-03
  • Vue3中虛擬dom轉(zhuǎn)成真實(shí)dom的過程詳解

    Vue3中虛擬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

最新評(píng)論