nginx部署vue前端打包项目方式
更新时间：2025年07月26日 11:51:56 作者：lytcreate.
本文指导Vue项目部署至Nginx,包括打包成dist.zip、上传解压到nginx/html目录、修改配置文件server块及base路径,替换后端IP后启动Nginx,通过指定IP:8083访问前端页面
一、nginx安装
安装说明见：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配置多端口多域名访问的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-11-11
Nginx是一款高性能的开源HTTP和反向代理服务器,以其高并发处理能力和低资源消耗而闻名,它支持多种功能,Nginx的配置文件基于文本,易于理解和修改,使其成为 Web 开发和运维人员的首选工具之一,本文给大家介绍了Nginx在Linux中的配置及维护全教程2025-02-02
本文主要介绍了Nginx禁止国外IP访问我的网站的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2023-07-07
这篇文章给大家主要介绍了Nginx配置中指令root与alias的区别，文章介绍的很详细，详细对大家理解root与alias很有帮助，有需要的朋友们下面来一起看看吧。2016-10-10
如果你的服务使用了nginx网关,可能会出现nginx缓冲sse流的问题,导致的现象是,客户端调用sse接口时,流数据并不是一条条出现的,而是一口气出现的,本文将给大家介绍如何解决SSE流被Nginx缓存的问题,需要的朋友可以参考下2023-10-10
这篇文章主要介绍了如何用nginx配置wordpress的方法示例，详细的介绍了配置步骤，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-09-09
在服务器配置与开发过程中,nginx 作为一款高效的 HTTP 和反向代理服务器,被广泛应用,而在 Windows 系统中,合理设置 nginx 的启动端口,是确保其正常运行与满足业务需求的关键步骤,本文将详细介绍 Windows 设置 nginx 启动端口的方法,需要的朋友可以参考下2025-02-02
nginx 配置代理服务地址最后多加反斜杠和不加反斜杠的区别小结
在使用Nginx配置代理服务时,地址最后是否添加反斜杠（/）会对代理的URL处理产生影响,下面就来具体介绍一下,感兴趣的可以了解一下2024-08-08
腾讯云服务器记录nginx配置cloudflare证书的实现步骤
本文主要介绍了腾讯云服务器记录nginx配置cloudflare证书的实现步骤,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧2025-09-09
这篇文章主要介绍了nginx命令参数用法详细介绍的相关资料,希望通过本文可以帮助到大家理解并应用这部分知识，需要的朋友可以参考下2017-08-08
最新评论