nginx 發布vue專案

2021-10-18 07:10:28 字數 2174 閱讀 9335

打包成功後,複製到伺服器。我的專案目錄是/usr/local/soft/nginx-web/micro-mall-h5

2、進入nginx安裝目錄下的 conf/nginx.conf檔案修改相關配置

listen配置埠這裡預設是80

修改location內容 當訪問http://localhost:80時會先訪問到「/」 接著去查詢root對應的路徑中的檔案,找到執行啟動頁 index.html

root是專案指向的位址 /usr/local/soft/nginx-web/micro-mall-h5

index打包檔案首頁

3、配置完成後 執行sbin下的命令

./nginx -s reload#重新載入nginx.conf配置檔案

./nginx -s stop#停止nginx  

./nginx#啟動nginx   

此時直接訪問 http://ip  即可直接訪問專案。

如果需要帶專案名稱部署,需要重新打包如下

上傳到伺服器目錄  我這裡上傳到 /usr/local/soft/nginx-web/mall

修改nginx.conf檔案如下,注意這裡我把root換成了alias

然後執行 ./nginx -s reload     ./nginx -s stop   ./nginx 三個命令使配置生效,並重啟nginx.

http://ip******/mall即可訪問專案。

至此完成ok ,同時也實現了nginx下多專案的部署,如需再加專案直接新增location配置即可。如果需要新增埠,新增整個server配置

****location下root和alias區別****

root與alias主要區別在於nginx如何解釋location後面的uri,這會使兩者分別以不同的方式將請求對映到伺服器檔案上。

root的處理結果是:root路徑+location路徑

alias的處理結果是:使用alias路徑替換location路徑

alias是乙個目錄別名的定義,root則是最上層目錄的定義。

還有乙個重要的區別是alias後面必須要用「/」結束,否則會找不到檔案的。。。而root則可有可無~~

root示例如:

location /test

如果乙個請求的uri是/test/index.html時,web伺服器將會返回伺服器上的/usr/local/soft/nginx-web/test/index.html的檔案。這裡root後面無需指定test目錄即可,nginx會在root後拼上location路徑

alias例項:

location /test 

如果乙個請求的uri是/test/index.html時,web伺服器將會返回伺服器上的/usr/local/soft/nginx-web/mall_test/index.html的檔案。注意這裡是mall_test,因為alias會把location後面配置的路徑丟棄掉,把當前匹配到的目錄指向到指定的目錄。

注意:1.使用alias時,目錄名後面一定要加"/"

3. alias在使用正則匹配時,必須捕捉要匹配的內容並在指定的內容處使用。

4. alias只能位於location塊中。(root可以不放在location中)

windows下 Nginx 發布 Vue專案

安裝環境 在指定目錄解壓即可使用。打包vue專案 npm run build 打包檔案在dist目錄下部署專案 將dist目錄下打包檔案遷移至nginx html目錄下修改配置 根據實際情況修改nginx conf目錄下 nginx.conf配置檔案 例如 listen 監聽埠 server nam...

vue 發布nginx重新整理專案 404 白屏

vue2.0構建專案,預設不做配置,使用是hash模式,位址列上有個 號,like http localhost 8000 login 這樣.官網文件使用history模式可以去掉 樣子like http localhost 8000 login 這樣.history模式下 當專案,在nginx上執...

vue發布Nginx配置Https

vue在國內的前端地位可謂是如日中天,由於目前主流的前後端分離式開發,讓許多前端小夥伴不太了解伺服器操作特別是linux,而許多後台開發人員雖然精通伺服器,卻不懂前端框架如何發布。本篇將詳細介紹vue構建靜態檔案發布至linux並配置nginx服務 https,在發布前我們先需要準備以下環境 下面以...