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è)版本，我測(cè)試用的是macOS，所以下載了第二個(gè)壓縮包

​

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

/Users/{電腦名稱}/Library

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

3.下載ngrok

ngrok.com/download

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

下載后解壓，會(huì)得到

​

將這個(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是名稱，后面的過(guò)程直接全部回車，暫時(shí)不用管。

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

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

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

npm run serve

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

​

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

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

​

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

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

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

終端輸入：

npm install -g serve

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

serve -s dist

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

​

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

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

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

/Users/{電腦名稱}/Library

這里面的。

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

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

​

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

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

開啟服務(wù)

./startup.sh

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

./shutdown.sh

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

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

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

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

6.外網(wǎng)映射

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

cd ~

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

./ngrok http localhost:8080

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

​

7.總結(jié)

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

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

最新評(píng)論