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

當前日期2019.5.15

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項目作相應的修改，展現更精美的網站。