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

Vue CLI3創(chuàng)建項(xiàng)目部署到Tomcat 使用ngrok映射到外網(wǎng)

 更新時(shí)間:2019年05月16日 08:32:38   作者:一個(gè)敲代碼的包子  
這篇文章主要介紹了Vue CLI3創(chuàng)建項(xiàng)目部署到Tomcat 使用ngrok映射到外網(wǎng),本文通過實(shí)例代碼給大家介紹的非常詳細(xì),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下

1.準(zhǔn)備工作。

1.首先準(zhǔn)備安裝Vue及Vue-CLI

$ npm install vue
$ npm install -g @vue/cli

2.其次下載Tomcat

tomcat.apache.org/index.html

任選一個(gè)版本,我測試用的是macOS,所以下載了第二個(gè)壓縮包

下載到本地后,解壓縮,并且將解壓縮后的文件夾復(fù)制到以下路徑下,其中電腦名稱就是你的用戶名稱。

/Users/{電腦名稱}/Library

,并且重命名為ApacheTomcat,這里要提一下,在這個(gè)文件夾下有個(gè)webapps,雙擊進(jìn)去,會有很多文件,不用關(guān)心。其中有一個(gè)ROOT文件夾,這個(gè)就是我們放置編譯打包后的網(wǎng)頁。后面再提。

3.下載ngrok

ngrok.com/download

上面是下載地址,這個(gè)工具需要注冊一個(gè)賬號,登錄之后就可以查看到一個(gè)token,是用來認(rèn)證的,這里跟著官方介紹的步驟下來就可以了。

下載后解壓,會得到

將這個(gè)文件放置在用戶根目錄下,方便終端敲指令

2.創(chuàng)建vue項(xiàng)目

因?yàn)槲覀兪褂昧藇ue腳手架,因此直接找一個(gè)找一個(gè)文件夾,打開終端進(jìn)入這個(gè)文件夾,

vue create hello

上面的命令的意思是創(chuàng)建一個(gè)初始化的vue項(xiàng)目,hello是名稱,后面的過程直接全部回車,暫時(shí)不用管。

OK,經(jīng)過以上步驟,在文件夾下有生成了一個(gè)名稱為hello的vue項(xiàng)目。

打開終端,cd進(jìn)入hello文件夾下。

在hello項(xiàng)目目錄下,終端輸入

npm run serve

經(jīng)過編譯打包,本地就開啟了以下服務(wù),可以在瀏覽器中打開地址去訪問,正常就顯示出了vue的一個(gè)介紹頁面。

3.編譯打包Vue項(xiàng)目

在hello項(xiàng)目中,添加一個(gè)文件,vue.config.js,內(nèi)容如下

module.exports = {
  baseUrl: process.env.NODE_ENV === 'production'
    ? '/'
    : '/'
}

上面的配置信息表示,如果當(dāng)前打包的環(huán)境是production,那么路徑就是'/'網(wǎng)站根路徑下,這里我為了方便,就2個(gè)都設(shè)置成根路徑了。保存。

現(xiàn)在我們需要編譯打包hello項(xiàng)目,在hello項(xiàng)目目錄下,終端輸入

npm run build

之后開始自動編譯打包。此時(shí),會發(fā)現(xiàn),hello項(xiàng)目下多了一個(gè)dist文件夾,內(nèi)容如下:

以上文件夾中的內(nèi)容就是我們打包后的網(wǎng)站項(xiàng)目了。

4.啟動本地服務(wù)驗(yàn)證打包的網(wǎng)頁是否正常工作

dist 目錄需要啟動一個(gè) HTTP 服務(wù)器來訪問 ,在本地預(yù)覽生產(chǎn)環(huán)境構(gòu)建最簡單的方式就是使用一個(gè) Node.js 靜態(tài)文件服務(wù)器,例如使用 serve

終端輸入:

npm install -g serve

安裝成功后,進(jìn)入hello項(xiàng)目,終端輸入:

serve -s dist

也就是對我們上一步中編譯打包好的文件啟動了一個(gè)本地服務(wù)器,信息如下,此時(shí)就可以打開瀏覽器,訪問我們的網(wǎng)頁了。若顯示正常則表示我們可以進(jìn)入下一步。

5.開啟Tomcat服務(wù),顯示網(wǎng)頁

上一步中,我們開啟的只是本地服務(wù),外網(wǎng)是訪問不了。因此我們需要加注Tomcat。

在第一步中,我們已經(jīng)下載了tomcat服務(wù)器。首先進(jìn)入那個(gè)ApacheTomcat文件夾中,在第一步中我們是放在

/Users/{電腦名稱}/Library

這里面的。

之前我們介紹過有一個(gè)webapps文件夾,在這個(gè)文件夾中有一個(gè)ROOT文件夾,這里面就是放我們打包好的網(wǎng)頁的,在上一步中我們已經(jīng)通過npm run build打包好網(wǎng)頁,并且生成在了dist目錄中。

此時(shí)我們只需要將dist目錄中的文件,全部拷貝的ROOT文件夾下,如下:

此時(shí)我們只需要開啟tomcat服務(wù)即可,

終端進(jìn)入ApacheTomcat目錄下的bin文件夾中,里面有很多指令,我們輸入:

開啟服務(wù)

./startup.sh

關(guān)閉服務(wù)

./shutdown.sh

后面如果看到Tomcat started.這個(gè)字樣,就代表服務(wù)啟動成功了。

此時(shí)瀏覽器中通過 http://localhost:8080/ 就可以訪問到我們通過tomcat搭建的服務(wù)器的網(wǎng)頁了。

但是這還只是局域網(wǎng)的,我們希望通過外網(wǎng)也能訪問到這個(gè)網(wǎng)頁,就必須通過工具映射。

也就是我們上面已經(jīng)下載的ngrok。

6.外網(wǎng)映射

在第一步中,我們將ngrok放置在了用戶根目錄下,則進(jìn)入用戶根目錄,終端可以通過輸入

cd ~

快捷進(jìn)入用戶根目錄,終端輸入:

./ngrok http localhost:8080

看到如下狀態(tài)就代表我們已經(jīng)映射外網(wǎng)成功,并且已經(jīng)可以通過下圖展示的那兩個(gè)臨時(shí)地址,在外網(wǎng)訪問我們的網(wǎng)頁了。

7.總結(jié)

至此,整個(gè)流程就結(jié)束了。通過以上步驟,我們就可以將一個(gè)網(wǎng)頁做好發(fā)布給朋友們看啦,自己也可以對vue項(xiàng)目做相應(yīng)的修改,展示更精美的網(wǎng)站。

以上所述是小編給大家介紹的Vue CLI3創(chuàng)建項(xiàng)目部署到Tomcat 使用ngrok映射到外網(wǎng),希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時(shí)回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持!
如果你覺得本文對你有幫助,歡迎轉(zhuǎn)載,煩請注明出處,謝謝!

相關(guān)文章

  • vue去掉嚴(yán)格開發(fā),去掉vue-cli安裝時(shí)的eslint或修改配置方式

    vue去掉嚴(yán)格開發(fā),去掉vue-cli安裝時(shí)的eslint或修改配置方式

    這篇文章主要介紹了vue去掉嚴(yán)格開發(fā),去掉vue-cli安裝時(shí)的eslint或修改配置方式,具有很好的參考價(jià)值,希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2022-04-04
  • 淺談Vue SSR 的 Cookies 問題

    淺談Vue SSR 的 Cookies 問題

    本篇文章主要介紹了淺談Vue SSR 的 Cookies 問題,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧
    2017-11-11
  • Vue組件的Prop命名約定詳解

    Vue組件的Prop命名約定詳解

    這篇文章主要為大家介紹了Vue組件的Prop命名約定詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
    2023-08-08
  • webpack + vue 打包生成公共配置文件(域名) 方便動態(tài)修改

    webpack + vue 打包生成公共配置文件(域名) 方便動態(tài)修改

    這篇文章主要介紹了webpack + vue 打包生成公共配置文件(域名) 方便動態(tài)修改,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
    2019-08-08
  • 基于vue監(jiān)聽滾動事件實(shí)現(xiàn)錨點(diǎn)鏈接平滑滾動的方法

    基于vue監(jiān)聽滾動事件實(shí)現(xiàn)錨點(diǎn)鏈接平滑滾動的方法

    本篇文章主要介紹了基于vue監(jiān)聽滾動事件實(shí)現(xiàn)錨點(diǎn)鏈接平滑滾動的方法,非常具有實(shí)用價(jià)值,有興趣的可以了解一下
    2018-01-01
  • vue Element-ui表格實(shí)現(xiàn)樹形結(jié)構(gòu)表格

    vue Element-ui表格實(shí)現(xiàn)樹形結(jié)構(gòu)表格

    這篇文章主要為大家詳細(xì)介紹了vue Element-ui表格實(shí)現(xiàn)樹形結(jié)構(gòu)表格,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2021-06-06
  • vue router返回到指定的路由的場景分析

    vue router返回到指定的路由的場景分析

    這篇文章主要介紹了vue router返回到指定的路由的場景分析,本文給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
    2020-11-11
  • Vue3?函數(shù)式彈窗的實(shí)例小結(jié)

    Vue3?函數(shù)式彈窗的實(shí)例小結(jié)

    這篇文章主要介紹了Vue3?函數(shù)式彈窗的實(shí)例小結(jié),本文通過實(shí)例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
    2023-11-11
  • Vuex實(shí)現(xiàn)簡單購物車

    Vuex實(shí)現(xiàn)簡單購物車

    這篇文章主要為大家詳細(xì)介紹了Vuex實(shí)現(xiàn)簡單購物車,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2021-01-01
  • vue二級路由設(shè)置方法

    vue二級路由設(shè)置方法

    下面小編就為大家分享一篇vue二級路由設(shè)置方法,具有很好的參考價(jià)值,希望對大家有所幫助。一起跟隨小編過來看看吧
    2018-02-02

最新評論