首先，買一臺雲伺服器是必要的，我使用的是阿里雲伺服器CentOS 7.4 64位作業系統。 在整個vue-cli專案上線過程中，我遇到了很多問題。不過，最終圓滿解決了，因此在這裡記錄一下。

遇到的問題：

• 雲伺服器連線
• vue專案打包上線
• nginx安裝配置
• 雲伺服器node的安裝
• 本地json資料無法訪問
• vue路由頁面無法訪問

一、使用Xshell連線雲伺服器

1. 雙擊開啟Xshell，並新建一個連線

注意：上圖的主機就是阿里雲上建立的例項的公網ip，如下圖：

3. 配置好主機後點擊連線，輸入登入名和密碼，登入名就是購買伺服器時輸入的登入名和密碼。

4. 點選確定後即可成功連線到雲伺服器，連線成功如下圖：

二、vue專案打包上線

1. 當我們在本地完成專案開發，可以成功訪問專案頁面時，執行 npm run build 命令，可以看到專案下有一個dist資料夾，這就是vue專案打包後的檔案。

2. 在Xshell中點選xftp工具圖示可開啟檔案介面。再次輸入密碼後可看到伺服器端的資料夾目錄。

3. 把本地打包好的檔案放到伺服器中，我是放到opt目錄下vue-website-pro專案下的，vue-website-pro是我的專案名稱。

當我們按照上面步驟打包上線後，訪問公網ip，是沒法看到頁面的。這是因為我們不可能通過一臺電腦的ip就去訪問電腦的檔案，雲伺服器相當於就是一臺電腦。所以我們還需要配置伺服器代理，我是通過配置nginx實現的，除了nginx還有其他很多伺服器也可以實現。如apache等。

三、nginx安裝配置

1. 在Xshell終端，也就是命令列視窗，輸入命令 yum install nginx ，當需要確認時輸入”y“回車。
2. 安裝完成後，輸入 service nginx start 啟動nginx服務。
3. 通過命令 nginx -t 檢視nginx所在的安裝目錄。nginx預設會安裝在 /etc/ 目錄下
4. 在命令列輸入命令 cd /etc/nginx 切換到nginx目錄下，再輸入 cat nginx.conf 可檢視當前nginx配置檔案。
5. 在nginx目錄下，輸入 vim nginx.conf 進入nginx配置編輯模式，然後按鍵盤 i 鍵，當命令列左下角出現-- INSERT-- 的時候，通過滑鼠上下鍵進行檔案修改，具體配置如下圖：
   注意：關於api的location配置，是對後臺api介面進行的配置，這裡可暫時不做此配置。
6. 當完成Nginx配置檔案的修改後，按鍵盤ESC鍵退出編輯模式，然後輸入 :wq 並回車，儲存修改並退出。
7. 修改完nginx配置檔案後，需要輸入 nginx -s reload 重啟nginx配置。這裡如果重啟失敗，可輸入 nginx -c /etc/nginx/nginx.conf ，然後再次重啟。

四、雲伺服器node的安裝

如果要在雲伺服器上使用node，則我們需要通過命令的方式安裝node。

1. 開啟Xshell並連線到雲伺服器
2. 輸入命令 wget https://nodejs.org/dist/v10.8.0/node-v10.8.0-linux-x64.tar.xz 回車，等待安裝。注意，前面的連結中的v10.8.0是node版本號，可修改版本號安裝子集需要的node版本。
3. 安裝完成後，輸入命令 tar xvf node-v10.8.0-linux-x64.tar.xz 回車進行解壓操作。
4. 輸入 mv node-v10.7.0-linux-x64 /usr/local/node回車， mv命令移動並改名。此時可切換到/usr/local/node目錄下，使用 ls 命令檢視下面的檔案。
5. 輸入命令 vi ~/.bash_profile 進入.bash_profile檔案的編輯，按 i 開始編輯，然後在檔案的export PATH前一行新增 PATH=$PATH:/usr/local/node/bin 新增完成後按 :wq 退出並儲存檔案。
6. 執行 source ~/.bash_profile 命令。
7. 此時輸入命令 node -v 和 npm -v 可檢視node和npm命令是否配置成功。如顯示了版本號則表示安裝成功。

五、解決本地json資料無法訪問問題

我的vue專案中使用了node載入了本地json檔案中的資料，所以在專案打包上線後，頁面可以顯示，但是資料沒有顯示出來。這是因為我讀取的本地db.json中的資料，自己寫了一個api介面。 所以，這裡還需要配置下nginx後臺伺服器地址，我的處理方式是：

1. 通過xftp將自己的後臺server檔案上傳上去，因為使用express和一些第三方模組，也將package.json檔案一併上傳了。
2. 切換到專案目錄下，使用 npm install 命令安裝第三方模組。安裝完成後，會發現專案資料夾下多了一個node_modules資料夾。
3. 只是上傳了資料夾還不夠，我們還需要配置nginx後臺伺服器地址，按照上面（三）中配置nginx的步驟對nginx.config檔案進行編輯，新增一個location。如果再上面配置Nginx的時候已經添加了可以不用再新增。

• 上圖中的 location ~/api/ 雙斜槓中間的api就是server檔案中定義的介面 apiServer.use('/api', apiRouter);
• proxy_pass 是後臺伺服器地址，因為是獲取本地json資料，則域名寫的是http://127.0.0.1,埠號8081是server檔案中監聽的埠 apiServer.listen(8081， fn) 。

4. 配置好nginx並儲存後，重啟nginx，使用上面的命令重啟nginx。
5. 要是node寫的後臺介面生效，我們需要使用 node index.js 執行node檔案，但這樣當我們關閉終端的時候，node後臺將停止，所以我們需要安裝forever來讓其永久執行。

• 安裝： $ npm install forever -g
• 啟動： $ forever start app.js
• 關閉： $ forever stop app.js
• 輸出日誌和錯誤： $ forever start -l forever.log -o out.log -e err.log app.js
• 其他關於forever的使用請參考forever的github地址

六、解決vue路由頁面無法訪問問題

通過上面的步驟配置好了nginx並將專案打包上線後，我們可以直接訪問阿里雲外網地址訪問我們的vue專案頁面了，但我發現又出現了一個問題，vue專案的頁面訪問時通過vue-router來控制的，結果我點選頁面連結後，路由頁面出現的是nginx not found。其實，解決方法vue-router的官網已經有了明確的說明，我們只要在nginx.config檔案中加入下面的程式碼即可： 如果再（三）中nginx配置的時候，已經加上了此配置則無需再加。 如果你使用的是其他伺服器，如apache等，vue-router官網也有解決方案，詳細請參考連結：vue-router後端配置

此時，再通過阿里雲的公網ip訪問，就可以看到我們的專案啦，啦啦啦啦~