本文將記錄vue項目打包放到服務器的整個過程，本文中的例子是express+vue,希望能給遇到這方面問題的同學一個解決辦法。

登錄服務器

假定已經擁有一個服務器賬號，然后下載一個xftp5用來作文件傳輸，下載一個xshell用來登陸服務器。如下圖所示，只需要填寫主機號即可（就是買的服務器的外網IP）

打包代碼

在服務器文件中進入home文件夾，然后創建一個項目文件，例如vuePro
vue項目npm run build后，項目根目錄下面有一個dist文件夾，然后將dist文件夾放入server文件夾中，最后將server文件夾傳輸到/home/vuePro中,下圖就是最終項目源代碼存放的位置（代碼均未壓縮）

安裝環境

• 安裝node
  1.先進入/usr/src文件夾，這個文件夾通常用來存放軟件源代碼
  cd /usr/src

  2.從Node.js的站點中獲取壓縮檔源代碼,我選擇的版本是v8.1.0
  wget http://nodejs.org/dist/v8.1.0/node-v8.1.0.tar.gz

  3.解壓縮源文件，并且進入到壓縮后的文件夾中:
  tar zxf node-v8.1.0.tar.gz
  cd node-v8.1.0

  4.執行配置腳本來進行編譯預處理:
  ./configure

  5.開始編譯源代碼
  make

  6.當編譯完成后，我們需要使之在系統范圍內可用, 編譯后的二進制文件將被放置到系統路徑，默認情況下，Node二進制文件應該放在/user/local/bin/node文件夾下:
  make install

  7.最后安裝一下Express,npm install -g express

  在make的過程中可能會出現組件缺失的情況。結合一下兩個回答，安裝一下對應的組件，可以解決問題。

  https://zhidao.baidu.com/question/467572486.html

  http://www.laozuo.org/9596.html

  啟動nginx:
  1.進入sbin目錄執行：/usr/local/nginx/sbin/nginx -t -c /usr/local/nginx/conf/nginx.conf
  2.執行：./nginx -s reload

  更改配置文件后：./nginx -t

  查看nginx服務
  netstat -anpt | grep nginx

  Nginx停止
  停止有三種方式：從容停止、快速停止、強制停止
  查看進程號: ps -ef|grep nginx
  從容停止：kill -QUIT 主進程號 eg: kill -QUIT 2313
  快速停止：kill -TERM 主進程號
  強制停止：pkill -9 nginx

修改配置文件

開發模式下由于設置了proxyTable，所以能夠請求到3030端口的接口。但是打包后是請求不到的，所以需要ngnix來做請求轉發。

在/usr/local/nginx/conf目錄下，將nginx.conf傳輸到桌面，用編輯器打開

在server中添加以下代碼即可

upstream mysvr{server 127.0.0.1:3030 ; # data server 數據服務器內網端口 }；location /api/ {proxy_pass http://mysvr; }

如果你的接口來自多個服務器端口，可以在mysvr中繼續添加。（location后面加了個/api是因為項目中的接口訪問都是/api/..這種形式，如果沒有可以省略）
然后再將項目文件指定到根目錄下面(改變原來的location即可)

location / {root /home/vuePro/server/dist;index index.html index.htm; }

修改完之后，將文件傳回服務器，在xshell中進入sbin目錄執行./nginx -t來讓配置生效。再執行./nginx -s reload來重啟服務器。在瀏覽器中輸入ip即可看到項目運行結果。

以上就是將項目打包放到服務器上的整個操作過程，如果遇到問題，歡迎留言。

轉載于:https://www.cnblogs.com/colagao/p/8886558.html

總結

以上是生活随笔為你收集整理的vue项目打包到腾讯云服务器全过程的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。