快捷導(dǎo)航

nginx部署vue前端打包項(xiàng)目方式

更新時(shí)間：2025年07月26日 11:51:56 作者：lytcreate.

本文指導(dǎo)Vue項(xiàng)目部署至Nginx,包括打包成dist.zip、上傳解壓到nginx/html目錄、修改配置文件server塊及base路徑,替換后端IP后啟動(dòng)Nginx,通過指定IP:8083訪問前端頁(yè)面

一、nginx安裝

安裝說明見：Nginx使用命令安裝說明

二、打包文件上傳部署

將vue打包后的靜態(tài)文件進(jìn)行上傳，打包后的目錄如下：

將dist文件夾進(jìn)行壓縮為dist.zip，并將該目錄打包上傳至服務(wù)器的nginx目錄： /usr/local/nginx/html，并使用unzip解壓

解壓文件：

unzip dist.zip

三、配置nginx.cnf

修改nginx配置文件：/usr/local/nginx/conf/nginx.conf

將server部分替換為如下內(nèi)容：

server {
                # nginx啟動(dòng)監(jiān)聽的端口
        listen       8083;
                
        # 可以是localhost和可以是本機(jī)ip地址，如果要給公司其他同事的電腦可以訪問，需要 配置為本機(jī)的ip地址
        server_name  192.168.110.112;


                # 配置頁(yè)面中發(fā)送的請(qǐng)求代理到后端接口        
                location /demo/ {
                        # rewrite  ^.+api/?(.*)$ /$1/api break;
                        proxy_pass http://192.168.110.112:8081/demo/;     # 后端的請(qǐng)求接口
                }

                location / {
                        #程序根目錄配置，也就是剛剛打包文件放置的目錄
            root   /usr/local/nginx/html/dist;
            index  index.html index.htm;
                        # 配置把所有匹配不到的路徑重定向到index.html，vue-router的mode是history模式的情況下需要配置，否則會(huì)出現(xiàn)刷新頁(yè)面404的情況
                        try_files $uri $uri/ /index.html;
                }
       
    }

里面的信息請(qǐng)酌情修改，其中8083就是前端的訪問接口

四、啟動(dòng)nginx

nginx

五、訪問頁(yè)面

訪問 http://192.168.110.112:8083 就可以訪問前端頁(yè)面啦！

六、注意事項(xiàng)

1.vite.config.js里面需要配置一個(gè)base值為./

2.main.js里面配置的后端ip需要將127.0.0.1修改為實(shí)際的ip，本例中為 192.168.110.112

總結(jié)

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

Nginx的安裝和多域名配置的實(shí)現(xiàn)方法
這篇文章主要介紹了Nginx的安裝和多域名配置的實(shí)現(xiàn)方法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2018-09-09
Nginx首頁(yè)修改及使用Nginx實(shí)現(xiàn)端口轉(zhuǎn)發(fā)
本文介紹了如何使用nginx將80端口轉(zhuǎn)發(fā)到CTF靶場(chǎng)的8000端口,包括nginx的安裝、啟動(dòng)、首頁(yè)修改及nginx.conf的端口轉(zhuǎn)發(fā)配置,幫助用戶通過IP或域名直接訪問靶場(chǎng)
2025-10-10
Nginx屏蔽F5心跳日志、指定IP訪問日志
這篇文章主要介紹了Nginx屏蔽F5心跳日志、指定IP訪問日志,本文直接給出配置示例,需要的朋友可以參考下
2015-04-04
詳解ngx_cache_purge _proxy_cache指令使用
本文主要介紹了詳解ngx_cache_purge _proxy_cache指令使用，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2022-07-07
nginx服務(wù)器中access_log日志分析與配置詳解
通過訪問日志，可以知曉用戶的地址，網(wǎng)站的哪些部分最受歡迎，用戶的瀏覽時(shí)間，對(duì)大多數(shù)用戶用的的瀏覽器做出針對(duì)性優(yōu)化。下面這篇文章主要給大家介紹了關(guān)于nginx服務(wù)器中access_log日志分析與配置的相關(guān)資料，需要的朋友可以參考下。
2017-12-12
深入淺析nginx部署及簡(jiǎn)單優(yōu)化
Nginx是lgor Sysoev為俄羅斯訪問量第二的rambler.ru站點(diǎn)設(shè)計(jì)開發(fā)的。本文重點(diǎn)給大家介紹nginx部署及簡(jiǎn)單優(yōu)化方案，感興趣的朋友一起看看吧
2018-08-08
Nginx出現(xiàn)“Too many open files”問題的解決方法
在進(jìn)行壓力測(cè)試時(shí),自建CDN節(jié)點(diǎn)的Nginx可能會(huì)出現(xiàn)“Too many open files”錯(cuò)誤,這通常意味著Nginx嘗試打開的文件數(shù)量超出了系統(tǒng)的限制,本文將詳細(xì)介紹如何識(shí)別和解決這一問題,確保Nginx在負(fù)載較高時(shí)仍能正常運(yùn)行,需要的朋友可以參考下
2024-10-10
Nginx配置SSL證書監(jiān)聽443端口
這篇文章主要為大家詳細(xì)介紹了Nginx配置SSL證書監(jiān)聽443端口的方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2018-02-02
nginx 與后臺(tái)端口沖突的解決
這篇文章主要介紹了nginx 與后臺(tái)端口沖突的解決，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2019-03-03
Nginx PHP-Fcgi中因PHP執(zhí)行時(shí)間導(dǎo)致504 Gateway Timeout錯(cuò)誤解決記錄
這篇文章主要介紹了Nginx PHP-Fcgi中因PHP執(zhí)行時(shí)間導(dǎo)致504 Gateway Timeout錯(cuò)誤解決記錄,本文的解決方法得來不易,需要的朋友可以參考下
2014-09-09