vue怎么部署服務器

這篇文章主要介紹了vue怎么部署服務器的相關知識，內容詳細易懂，操作簡單快捷，具有一定借鑒價值，相信大家閱讀完這篇vue怎么部署服務器文章都會有所收獲，下面我們一起來看看吧。

部署前端項目vue到服務器

首對應的是找到項目 進入對應的目錄下

進行 npm run build 會生成一個dist文件 將整個dist文件上傳到服務器就可以了

然后就是首先就是安裝node.js 對應的版本不建議最先版本 有可能會出現一些莫名的錯誤

node.Js 安裝完成后就是軟連接  類似于配置環境變量

下來就是安裝 express - generator生成器

 npm install -g express -generator

創建項目

express 項目名字

進入項目 安裝依賴

npm  install

對應剛才生成的dist放入對應的項目名中的public中

之后運行

npm start 

直接打開瀏覽器就可以就進行訪問了

但是有的項目屬于前后端項目分離 需要后端給前端處理相應 返回數據結果 整個時候需要Nginx進行反向代理這個分離項目

推薦使用服務器寶塔面板 安裝可以減少很多的操作和出錯概率

對應的還是需要設置自己的端口 不建議使用熟知的端口號碼 也不建議用默認的80

可以直接在自己的vue項目中的prod.env.js中設置端口和主機 也可以在Nginx配置文件nginx.conf中進行設置

以及在前后端數據庫的提交路徑也要和后端的虛擬路徑相符合，如果是不同的服務器也要將localhost更改為公網地址

不然 訪問前端會出現 報錯

會很大程度影響判斷是nginx.conf配置寫的有問題。

剩下的就是對nginx.conf文件配置

前端訪問的端口 以及主機名

此處的root是dist的全路徑

這個必須要要 不然對應的前端靜態資源不能被訪問到

    location ——* \.(gif|jpg|jpeg|png|css|js|ico|css|eot|svg|ttf|woff|mov)$ {

root  自己項目的dist全路徑;

  expires   48h;

access_log   off;

}

其中/dushaoqin 對應的是自己的后端的虛擬路徑 且此處的端口用的是后端的端口號碼

剩下的地方可以和我一樣 主要是就是通用性的配置

location /dushaoqin {

proxy_pass http://公網地址：端口號/虛擬路徑/;

proxy_set_header Host $host;

  proxy_connect_timeout 600;                #配置點1

            proxy_read_timeout 600;                  #配置點2，如果沒效，可以考慮這個時間配置長一點

            proxy_send_timeout 600;                  #配置點3

            proxy_set_header Host $host:$server_port;

            proxy_http_version 1.1;

            proxy_set_header Upgrade $http_upgrade;

            proxy_set_header Connection "upgrade";

}

到這里 基本上前端項目就差不多了

打開運行后端項目 就可以進行訪問前端的資源路徑了

主要難點就是

對應的nginx.conf的配置 以及vue對應的前后端數據接口api的路徑設置是否同步

關于“vue怎么部署服務器”這篇文章的內容就介紹到這里，感謝各位的閱讀！相信大家對“vue怎么部署服務器”知識都有一定的了解，大家如果還想學習更多知識，歡迎關注億速云行業資訊頻道。