Vue CLI3創建項目部署到Tomcat 使用ngrok映射到外網

1.準備工作。

1.首先準備安裝Vue及Vue-CLI

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

2.其次下載Tomcat

tomcat.apache.org/index.html

任選一個版本，我測試用的是macOS，所以下載了第二個壓縮包

​

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

/Users/{電腦名稱}/Library

，并且重命名為ApacheTomcat，這里要提一下，在這個文件夾下有個webapps，雙擊進去，會有很多文件，不用關心。其中有一個ROOT文件夾，這個就是我們放置編譯打包后的網頁。后面再提。

3.下載ngrok

ngrok.com/download

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

下載后解壓，會得到

​

將這個文件放置在用戶根目錄下，方便終端敲指令

2.創建vue項目

因為我們使用了vue腳手架，因此直接找一個找一個文件夾，打開終端進入這個文件夾，

vue create hello

上面的命令的意思是創建一個初始化的vue項目，hello是名稱，后面的過程直接全部回車，暫時不用管。

OK，經過以上步驟，在文件夾下有生成了一個名稱為hello的vue項目。

打開終端，cd進入hello文件夾下。

在hello項目目錄下，終端輸入

npm run serve

經過編譯打包，本地就開啟了以下服務，可以在瀏覽器中打開地址去訪問，正常就顯示出了vue的一個介紹頁面。

​

3.編譯打包Vue項目

在hello項目中，添加一個文件，vue.config.js，內容如下

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

上面的配置信息表示，如果當前打包的環境是production，那么路徑就是'/'網站根路徑下，這里我為了方便，就2個都設置成根路徑了。保存。

現在我們需要編譯打包hello項目，在hello項目目錄下，終端輸入

npm run build

之后開始自動編譯打包。此時，會發現，hello項目下多了一個dist文件夾，內容如下：

​

以上文件夾中的內容就是我們打包后的網站項目了。

4.啟動本地服務驗證打包的網頁是否正常工作

dist 目錄需要啟動一個 HTTP 服務器來訪問 ，在本地預覽生產環境構建最簡單的方式就是使用一個 Node.js 靜態文件服務器，例如使用 serve

終端輸入：

npm install -g serve

安裝成功后，進入hello項目，終端輸入：

serve -s dist

也就是對我們上一步中編譯打包好的文件啟動了一個本地服務器，信息如下，此時就可以打開瀏覽器，訪問我們的網頁了。若顯示正常則表示我們可以進入下一步。

​

5.開啟Tomcat服務，顯示網頁

上一步中，我們開啟的只是本地服務，外網是訪問不了。因此我們需要加注Tomcat。

在第一步中，我們已經下載了tomcat服務器。首先進入那個ApacheTomcat文件夾中，在第一步中我們是放在

/Users/{電腦名稱}/Library

這里面的。

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

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

​

此時我們只需要開啟tomcat服務即可，

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

開啟服務

./startup.sh

關閉服務

./shutdown.sh

后面如果看到Tomcat started.這個字樣，就代表服務啟動成功了。

此時瀏覽器中通過 http://localhost:8080/ 就可以訪問到我們通過tomcat搭建的服務器的網頁了。

但是這還只是局域網的，我們希望通過外網也能訪問到這個網頁，就必須通過工具映射。

也就是我們上面已經下載的ngrok。

6.外網映射

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

cd ~

快捷進入用戶根目錄，終端輸入：

./ngrok http localhost:8080

看到如下狀態就代表我們已經映射外網成功，并且已經可以通過下圖展示的那兩個臨時地址，在外網訪問我們的網頁了。

​

7.總結

至此，整個流程就結束了。通過以上步驟，我們就可以將一個網頁做好發布給朋友們看啦，自己也可以對vue項目做相應的修改，展示更精美的網站。

以上所述是小編給大家介紹的Vue CLI3創建項目部署到Tomcat 使用ngrok映射到外網,希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對億速云網站的支持！
如果你覺得本文對你有幫助，歡迎轉載，煩請注明出處，謝謝！