nginx部署vue前端打包項目方式
更新時間：2025年07月26日 11:51:56 作者：lytcreate.
本文指導Vue項目部署至Nginx,包括打包成dist.zip、上傳解壓到nginx/html目錄、修改配置文件server塊及base路徑,替換后端IP后啟動Nginx,通過指定IP:8083訪問前端頁面
一、nginx安裝
安裝說明見：Nginx使用命令安裝說明
二、打包文件上傳部署
將vue打包后的靜態(tài)文件進行上傳，打包后的目錄如下：
將dist文件夾進行壓縮為dist.zip，并將該目錄打包上傳至服務器的nginx目錄： /usr/local/nginx/html，并使用unzip解壓
解壓文件：
unzip dist.zip
三、配置nginx.cnf
修改nginx配置文件：/usr/local/nginx/conf/nginx.conf
將server部分替換為如下內(nèi)容：
server {
# nginx啟動監(jiān)聽的端口
listen 8083;
# 可以是localhost和可以是本機ip地址，如果要給公司其他同事的電腦可以訪問，需要 配置為本機的ip地址
server_name 192.168.110.112;
# 配置頁面中發(fā)送的請求代理到后端接口
location /demo/ {
# rewrite ^.+api/?(.*)$ /$1/api break;
proxy_pass http://192.168.110.112:8081/demo/; # 后端的請求接口
}
location / {
#程序根目錄配置，也就是剛剛打包文件放置的目錄
root /usr/local/nginx/html/dist;
index index.html index.htm;
# 配置把所有匹配不到的路徑重定向到index.html，vue-router的mode是history模式的情況下需要配置，否則會出現(xiàn)刷新頁面404的情況
try_files $uri $uri/ /index.html;
}
}里面的信息請酌情修改，其中8083就是前端的訪問接口
四、啟動nginx
nginx
五、訪問頁面
訪問 http://192.168.110.112:8083 就可以訪問前端頁面啦！
六、注意事項
1.vite.config.js里面需要配置一個base值為./
2.main.js里面配置的后端ip需要將127.0.0.1修改為實際的ip，本例中為 192.168.110.112
總結(jié)
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了Nginx配置多端口多域名訪問的實現(xiàn)，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-11-11
Nginx是一款高性能的開源HTTP和反向代理服務器,以其高并發(fā)處理能力和低資源消耗而聞名,它支持多種功能,Nginx的配置文件基于文本,易于理解和修改,使其成為 Web 開發(fā)和運維人員的首選工具之一,本文給大家介紹了Nginx在Linux中的配置及維護全教程2025-02-02
Nginx禁止國外IP訪問我的網(wǎng)站的實現(xiàn)
本文主要介紹了Nginx禁止國外IP訪問我的網(wǎng)站的實現(xiàn)，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2023-07-07
這篇文章給大家主要介紹了Nginx配置中指令root與alias的區(qū)別，文章介紹的很詳細，詳細對大家理解root與alias很有幫助，有需要的朋友們下面來一起看看吧。2016-10-10
如果你的服務使用了nginx網(wǎng)關(guān),可能會出現(xiàn)nginx緩沖sse流的問題,導致的現(xiàn)象是,客戶端調(diào)用sse接口時,流數(shù)據(jù)并不是一條條出現(xiàn)的,而是一口氣出現(xiàn)的,本文將給大家介紹如何解決SSE流被Nginx緩存的問題,需要的朋友可以參考下2023-10-10
這篇文章主要介紹了如何用nginx配置wordpress的方法示例，詳細的介紹了配置步驟，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-09-09
在服務器配置與開發(fā)過程中,nginx 作為一款高效的 HTTP 和反向代理服務器,被廣泛應用,而在 Windows 系統(tǒng)中,合理設置 nginx 的啟動端口,是確保其正常運行與滿足業(yè)務需求的關(guān)鍵步驟,本文將詳細介紹 Windows 設置 nginx 啟動端口的方法,需要的朋友可以參考下2025-02-02
nginx 配置代理服務地址最后多加反斜杠和不加反斜杠的區(qū)別小結(jié)
在使用Nginx配置代理服務時,地址最后是否添加反斜杠（/）會對代理的URL處理產(chǎn)生影響,下面就來具體介紹一下,感興趣的可以了解一下2024-08-08
騰訊云服務器記錄nginx配置cloudflare證書的實現(xiàn)步驟
本文主要介紹了騰訊云服務器記錄nginx配置cloudflare證書的實現(xiàn)步驟,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧2025-09-09
這篇文章主要介紹了nginx命令參數(shù)用法詳細介紹的相關(guān)資料,希望通過本文可以幫助到大家理解并應用這部分知識，需要的朋友可以參考下2017-08-08