Vue項目部署到服務器經過公網IP訪問

1、vue項目打包

1.打包項目及修改文件

在本地的項目完成後，可能須要將其部署到服務器上，而且經過公網IP就能夠訪問到這個項目，下面介紹一下具體的部署流程。html

首先將寫好的vue項目打包，在vue項目的當前目錄下面運行npm run build，運行完成後，就能夠發現項目中多了一個dist的文件夾，這是打包好的文件，能夠用來直接運行。文件夾項目包含一個static和index.html文件，static文件下包含的是全部的源代碼和數據，index.html是能夠直接在本地運行的網頁文件。vue

在運行前先要改幾個地方，纔可以成功運行出來。在沒有打包以前先打開config文件夾下面的index.js文件，修改以下圖所示的dev和build對象中的assetsPublicPath屬性，原本是’/’，如今改成’./’。完成後保存再進行打包操做（npm run build）。

打包完成後打開dist文件夾下面的index.html文件，把代碼的路徑改成和下圖紅色框中同樣的路徑。原本是’/’，如今改成’./’，一共四個地方，改好以後保存。而後運行這個HTML文件就能夠在本地瀏覽器中看到主叫的項目了，若是可以成功運行，說明打包成功。node

2.加載背景圖片

若是項目中有背景圖片的話，若是按照上述操做，就不會顯示出來。那麼如何把背景圖片也加載出來呢。打開build文件下面的utils.js文件，在如圖所示的代碼位置添加 publicPath: ‘…/…/’,這一行代碼，就能夠解決背景圖片加載不出來的問題。shell

2、服務器配置環境

上面vue項目配置完成後，先不用着急，把服務器上面的環境配置好才能運行。我用的服務器是阿里雲Ubuntu服務器，遠程鏈接工具爲xshell。npm

xshell怎麼鏈接服務器就不具體講了，須要的自行百度。鏈接到服務器後，接下來按照下面的幾個步驟進行操做。vim

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地址。

3、釋放終端

上面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