Vue項目部署到服務器通過公網IP訪問
一、vue項目打包
1.打包項目及修改文件
在本地的項目完成後，可能需要將其部署到服務器上，並且通過公網IP就可以訪問到這個項目，下面介紹一下具體的部署流程。
首先將寫好的vue項目打包，在vue項目的當前目錄下面運行npm run build，運行完成後，就可以發現項目中多了一個dist的文件夾，這是打包好的文件，可以用來直接運行。文件夾項目包含一個static和index.html文件，static文件下包含的是所有的源代碼和數據，index.html是可以直接在本地運行的網頁文件。
在運行前先要改幾個地方，才能夠成功運行出來。在沒有打包之前先打開config文件夾下面的index.js文件，修改如下圖所示的dev和build對象中的assetsPublicPath屬性，本來是’/’，現在改爲’./’。完成後保存再進行打包操作（npm run build）。
打包完成後打開dist文件夾下面的index.html文件，把代碼的路徑改爲和下圖紅色框中一樣的路徑。本來是’/’，現在改爲’./’，一共四個地方，改好之後保存。然後運行這個HTML文件就可以在本地瀏覽器中看到主叫的項目了，如果能夠成功運行，說明打包成功。
2.加載背景圖片
如果項目中有背景圖片的話，如果按照上述操作，就不會顯示出來。那麼如何把背景圖片也加載出來呢。打開build文件下面的utils.js文件，在如圖所示的代碼位置添加 publicPath: ‘…/…/’,這一行代碼，就可以解決背景圖片加載不出來的問題。
二、服務器配置環境
上面vue項目配置完成後，先不用着急，把服務器上面的環境配置好才能運行。我用的服務器是阿里雲Ubuntu服務器，遠程連接工具爲xshell。
xshell怎麼連接服務器就不具體講了，需要的自行百度。連接到服務器後，接下來按照下面的幾個步驟進行操作。
1.安裝node環境，因爲vue項目依賴於node，所以的先把這個安裝好。在xshell中輸入
apt install npm
安裝完成後輸入npm -v來檢查是否安裝成功，如果命令行打印npm的版本號，說明安裝成功。npm是國外的，下載速度很慢，所以換成cnpm，下載東西快一點。運行命令
npm i -g cnpm
這個下載速度可能很慢，需要等待一會時間，不要沒有安裝完就直接取消了。如果報錯沒有安裝成功，再安裝一次試試。安裝完成後可以輸入命令 cnpm -v 來查看是否安裝成功。
安裝完node後可以在命令行輸入node，測試服務器是否安裝好node.js環境。如果出現一個箭頭，就代表安裝完成。退出的話直接運行兩次Ctrl+c。
2.安裝完成後，就需要把打包好的文件傳到服務器上面去。查看我之前的教程《阿里雲服務器初始配置》，在第三步中（登錄連接到服務器），按照這一步操作給服務器安裝lrzsz，來進行命令式的文件傳送。或者通過xshell的xftfp來進行文件傳送。選擇vue項目中的dist文件夾，傳送到服務器的根目錄下面。如果不能選擇文件夾，把dist文件夾壓縮一下，然後服務器用壓縮命令解壓就可以了。
3.vue項目中一般都是8080端口，阿里雲服務器默認不開放這個端口，還是看《阿里雲服務器初始配置》，在第二步中如何開發端口。開放完8080端口後，在xshell中運行命令cnpm i -g serve安裝serve模塊，然後進入到剛剛的dist文件夾下面，運行命令serve -l 8080，就成功將vue項目部署到服務器上面了。
4.在瀏覽器中輸入‘公網IP地址:端口(8080)’,就可以訪問自己的項目了。注意不是xshell打印的地址，上面打印的地址爲服務器的私網IP地址。
三、釋放終端
上面vue項目開啓服務後會一直佔用服務器的終端，如果想進行其他操作或者關閉xshell後，當前這個端口就會被關閉。如果想項目一直在服務器上面掛着，並且關閉xshell後或者估計後都可以訪問到這個項目，那麼進行如下的操作就可以解決這個問題。
1.首先在命令行中cnpm i pm2 -g 來安裝 PM2，然後確保服務器已經安裝了vim和touch,一般都會有，不需要安裝。在dist文件夾項目新建一個serve.sh文件，運行命令
touch serve.sh
然後ls查看文件是否創建成功，創建成功後用vim打開，運行命令
vim serve.sh
打開後在文件中寫入
serve -l 8080
在vim中的操作，i是插入，esc鍵是切換模式，:wq是保存並且退出，:q是退出。
保存後退出vim編輯器。
2.開啓服務，運行命令。online代表在運行
pm2 start serve.sh
3.如果想把這個服務停掉，運行命令
pm2 stop serve.sh
至此vue項目部署到服務器上面就完成了，沒有域名的就可以直接用公網IP地址:端口號的方式來訪問了。