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版本号隐藏(附405 not allowed解决办法)
版本号泄露时攻击者会利用相应软件版本的当前漏洞,进行有效的相应攻击,本文主要介绍了nginx版本号隐藏,具有一定的参考价值,感兴趣的可以了解一下2023-10-10
文章介绍了如何在Nginx中实现正向代理和反向代理对HTTP和HTTPS协议的支持,通过使用第三方模块`ngx_http_proxy_connect_module`和Nginx内置的`ngx_http_ssl_module`,可以实现Nginx对HTTPS的正向和反向代理2025-03-03
这篇文章主要介绍了Nginx服务器中设置本地浏览器缓存的简单方法,需要的朋友可以参考下2015-12-12
这篇文章主要介绍了nginx安装时,make编译可能会出现的错误问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-06-06
这篇文章主要介绍了win10上安装nginx的方法步骤，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-10-10
在实际应用中我们可能需要获取用户的ip地址,比如做异地登陆的判断,或者统计ip访问次数等,下面这篇文章主要给大家介绍了关于Nginx代理后如何获取客户端真实IP地址的相关资料,需要的朋友可以参考下2023-05-05
这篇文章主要为大家详细介绍了CentOS7下非编译安装Nginx的图文教程,文中通过示例图片进行了详细讲解,有需要的小伙伴可以跟随小编一起学习一下2023-10-10
最近打开网站看看结果提示:nginx 404 not found,所以这篇文章主要给大家介绍了关于Nginx报404错误的简单解决方法,文中通过图文介绍的非常详细,需要的朋友可以参考下2022-07-07
这篇文章主要为大家介绍了nginx如何指向本地路径及500错误解决方法，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-03-03
负载均衡（load-balance）就是将负载分摊到多个操作单元上执行，从而提高服务的可用性和响应速度，带给用户更好的体验，本文给大家介绍nginx 负载均衡轮询方式配置，感兴趣的朋友一起看看吧2022-03-03
最新评论