nginx部署vue前端打包项目方式

更新时间：2025年07月26日 11:51:56 作者：lytcreate.

本文指导Vue项目部署至Nginx,包括打包成dist.zip、上传解压到nginx/html目录、修改配置文件server块及base路径,替换后端IP后启动Nginx,通过指定IP:8083访问前端页面

一、nginx安装

二、打包文件上传部署

将vue打包后的静态文件进行上传，打包后的目录如下：

将dist文件夹进行压缩为dist.zip，并将该目录打包上传至服务器的nginx目录： /usr/local/nginx/html，并使用unzip解压

解压文件：

unzip dist.zip

三、配置nginx.cnf

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

将server部分替换为如下内容：

server {
                # nginx启动监听的端口
        listen       8083;
                
        # 可以是localhost和可以是本机ip地址，如果要给公司其他同事的电脑可以访问，需要 配置为本机的ip地址
        server_name  192.168.110.112;


                # 配置页面中发送的请求代理到后端接口        
                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模式的情况下需要配置，否则会出现刷新页面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

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

Nginx的安装和多域名配置的实现方法
这篇文章主要介绍了Nginx的安装和多域名配置的实现方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-09-09
Nginx首页修改及使用Nginx实现端口转发
本文介绍了如何使用nginx将80端口转发到CTF靶场的8000端口,包括nginx的安装、启动、首页修改及nginx.conf的端口转发配置,帮助用户通过IP或域名直接访问靶场
2025-10-10
Nginx屏蔽F5心跳日志、指定IP访问日志
这篇文章主要介绍了Nginx屏蔽F5心跳日志、指定IP访问日志,本文直接给出配置示例,需要的朋友可以参考下
2015-04-04
详解ngx_cache_purge _proxy_cache指令使用
本文主要介绍了详解ngx_cache_purge _proxy_cache指令使用，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2022-07-07
nginx服务器中access_log日志分析与配置详解
通过访问日志，可以知晓用户的地址，网站的哪些部分最受欢迎，用户的浏览时间，对大多数用户用的的浏览器做出针对性优化。下面这篇文章主要给大家介绍了关于nginx服务器中access_log日志分析与配置的相关资料，需要的朋友可以参考下。
2017-12-12
深入浅析nginx部署及简单优化
Nginx是lgor Sysoev为俄罗斯访问量第二的rambler.ru站点设计开发的。本文重点给大家介绍nginx部署及简单优化方案，感兴趣的朋友一起看看吧
2018-08-08
Nginx出现“Too many open files”问题的解决方法
在进行压力测试时,自建CDN节点的Nginx可能会出现“Too many open files”错误,这通常意味着Nginx尝试打开的文件数量超出了系统的限制,本文将详细介绍如何识别和解决这一问题,确保Nginx在负载较高时仍能正常运行,需要的朋友可以参考下
2024-10-10
Nginx配置SSL证书监听443端口
这篇文章主要为大家详细介绍了Nginx配置SSL证书监听443端口的方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2018-02-02
nginx 与后台端口冲突的解决
这篇文章主要介绍了nginx 与后台端口冲突的解决，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2019-03-03
Nginx PHP-Fcgi中因PHP执行时间导致504 Gateway Timeout错误解决记录
这篇文章主要介绍了Nginx PHP-Fcgi中因PHP执行时间导致504 Gateway Timeout错误解决记录,本文的解决方法得来不易,需要的朋友可以参考下
2014-09-09