Nginx部署Vue二级目录500错误的解决方案
更新时间：2026年05月24日 10:37:55 作者：路明子正
这段描述主要讲解了在Nginx环境下部署Vue项目的方法,特别针对二级域名和路径配置进行了详细说明,提供了解决500错误的有效配置
一、用Vue开发项目就少了部署到在Nginx的环境下
如果没有特殊的要求，域名或者主机名、IP都是直接的地址，没有子目录或者不是子域的话，那部署一般都很简单，基本下就按照一种根目录的转发就可以了。
server {
listen 80;
location / {
root /opt/nginx/html/myadd;
#防刷新500错误
try_files $uri $uri/ /index.html;
index index.html index.htm;
}
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root /app/nginx/html;
}
location ~ /.ht {
deny all;
}
}直接页面刷且不出500错误，那只需要在 location / 中添加 try_files $uri $uri/ /index.html; 即可。
二、还有一种情况就是有具体的、特殊的要求
这种情况是用于特殊的环境，例如给政.府、企事业、电信行业等单部署相关项目时就会有类似的要求。
给你分配一个二级域名，或者给你一个二级目标。
如：www.xxxxxx.com/yy/ 为你的项目根目录，那这种情况，往往会很麻烦，需要改动的东西也很多，除了生产环境、测试环境的配置的变化，还有代码级的更改，Vue需要启用“history"模式的 router ，另外还需要在router 里添加二级码为 根访问路径
这里需要注意
静太资源也需要做配置，一般都是在router.js 里添加二级目录
export default new Router({
mode: 'history',
base: '/yy',
scrollBehavior: () => ({ y: 0 }),
routes: constantRouterMap
})静态资源、公共资源访问配置：
module.exports = {
publicPath: '/yy/',
outputDir: 'dist',
assetsDir: 'static',
lintOnSave: false,
productionSourceMap: false,
......
}好了，到目前为止，Vue的配置基本OK了
但现在把这个打包并部署到Nginx上后，一刷新就会出现500错误，而且用原来的方式(try_files $uri $uri/ /index.html;)配置不起作用,现在只能配置成二级目录的路径才可以。
配置如下：
server {
listen 80;
location / {
root /opt/nginx/html/myadd;
#二级目录防刷新500错误
try_files $uri $uri/ /yy/index.html;
index index.html index.htm;
}
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root /app/nginx/html;
}
location ~ /.ht {
deny all;
}
}好了，这样配置(try_files $uri $uri/ /yy/index.html;)好后就可以解决刷新500错误的问题了。
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了Nginx和vue编译后的存放位置的配置过程,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2025-09-09
这篇文章主要为大家分享了一篇很详细的Nginx配置说明，主要内容包括Nginx常用功能、Nginx配置文件结构，想要了解Nginx配置的朋友不要错过，参考一下2016-02-02
文章主要解释了Nginx配置中如何通过location规则将前端静态资源和后端接口请求进行分流,并详细描述了请求转发到后端的具体过程,包括rewrite规则、代理协议设置、请求头透传、代理地址指定及失败重试机制等2026-05-05
这篇文章主要为大家详细介绍了Linux centos7环境下Nginx安装教程，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-03-03
这篇文章主要介绍了Nginx提高安全与性能的最好配置详解，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-06-06
这篇文章主要介绍了Nginx 如何限制访问频率，下载速率和并发连接数的方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-08-08
在工作中,经常会用用户实际请求的IP地址,本文主要介绍了Nginx暴露出请求的真实IP的问题,具有一定的参考价值,感兴趣的可以了解一下2023-10-10
本文介绍下，重启nginx服务后丢失nginx.pid文件的解决方法，有需要的朋友，可以作个参考2014-01-01
这篇文章主要介绍了一个Nginx实现部署多个不同的项目方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-03-03
本文详细介绍了如何在Windows系统上安装和配置Nginx以支持HTTPS,首先,下载并解压Nginx和OpenSSL,并配置环境变量,然后,生成SSL证书和密钥文件,并在Nginx配置文件中启用SSL,最后,启动Nginx并访问配置的HTTPS路径以验证配置是否成功2026-01-01
最新评论