這篇文章主要介紹了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怎么部署服務器”知識都有一定的了解，大家如果還想學習更多知識，歡迎關注創新互聯行業資訊頻道。

新聞名稱：vue怎么部署服務器
文章位置：http://www.yijiale78.com/article38/jjjppp.html

成都網站建設公司_創新互聯，為您提供商城網站、App開發、服務器托管、自適應網站、企業建站、網站設計公司

廣告

聲明：本網站發布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創新互聯