nginx部署vue后显示500 Internal Server Error解决方案

已于 2023-09-26 13:49:08 修改
阅读量889 收藏 3
点赞数 3
文章标签： vue.js nginx 前端
于 2023-09-14 15:04:20 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_55333789/article/details/132877143
版权

前言

描述：当我配置好全部之后，通过 服务器 ip 地址访问，遇到报错信息：500 Internal Server Error。

今天部署vue前端项目一直报错500，无法显示出主页面。

一个以为是自己的dist位置没有访问正确或者nginx.conf的位置写的不对，，最后才发现！是权限的问题！！
我要访问/home/ubuntu/myapp/ruoyi/ruoyi-ui/dist的地址，路径写的完全没有问题。

最后看到error.log里的信息才恍然大悟，原来是权限问题

这真的太坑了。
nginx.conf里的权限设置默认是如图，就在第一行！！是被注释掉的，那么默认就表示什么权限也没有。。所以无法访问。

需要做的就是将权限设为root，这样就可以了！

前端页面终于可以正常访问了！！！太不容易了!

大可-
关注
  • 3
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
Nginx出现500 Internal Server Error 错误的解决方案
09-14
**Nginx 500 Internal Server Error 详解与解决方案** 在使用Nginx服务器时，用户可能会遇到“500 Internal Server Error”的错误。这是一个常见的HTTP状态代码，表示服务器在处理请求时遇到了一个未预期的状况，...
nginx出现500 Internal Server Error错误
最新发布
qq_37686995的博客
06-05 1232
确保 Nginx 进程对所需的文件和目录具有正确的访问权限。例如，如果使用的是静态文件，确保 Nginx 进程对这些文件具有读取权限。如果 Nginx 代理了一个后端应用程序，那么问题可能出在后端应用程序上。查看应用程序的日志文件，找到具体的错误信息。如果 Nginx 代理了一个后端服务（例如 PHP-FPM、Python 应用等），确保这些服务正在运行并且没有错误。错误日志是最直接的信息来源，日志会记录导致 500 错误的具体原因。确保主机的端口 80 映射到容器的端口 80。
2024年vue 文本超过2行展示更多：列表做法、单个文本做法(2)，2024年最新web前端工程面试问题有哪些
2401_84617873的博客
05-10 322
推荐一些系统学习的途径和方法。每个Web开发人员必备，很权威很齐全的Web开发文档。作为学习辞典使用，可以查询到每个概念、方法、属性的详细解释，注意使用英文关键字搜索。里面的一些 HTML，CSS，HTTP 技术教程也相当不错。开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】HTML 和 CSS：“展开” : “收起”}}单个div 里面超出2行显示更多。
2024年Web前端最全nginx部署vue后显示500 Internal Server Error解决方案(1)，阿里P7Web前端社招面试的经历
2401_84446919的博客
05-11 885
推荐一些系统学习的途径和方法。每个Web开发人员必备，很权威很齐全的Web开发文档。作为学习辞典使用，可以查询到每个概念、方法、属性的详细解释，注意使用英文关键字搜索。里面的一些 HTML，CSS，HTTP 技术教程也相当不错。开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
【Nginx中提示500 Internal Server Error错误的原因】
u012632105的博客
08-07 1301
Nginx中提示500 Internal Server Error错误的原因
Nginx服务器出现500（Internal Server Error）错误的原因及解决方法
weixin_44000332的博客
12-01 1万+
500主要指的是服务器内部错误，即服务器遇到意外情况，无法完成请求导致返回出错。查看日志发现显示是访问权限问题(13: Permission denied)，定位config配置问题。1、查看nginx启动用户和使用用户是否一致。3、把 nginx 改为 root。一个是www,一个是root用户。打开 nginx.conf 文件。查找nginx.conf的位置。2、打开nginx配置文件。4、重启nginx服务。
nginx部署vue前端项目，访问报错500 Internal Server Error
weixin_43976226的博客
09-19 1915
至于为什么会出现标题上面的报错，是因为我把配置文件内的 root 对应的路径写错了。所以在我排查的过程中，一直觉得很奇怪，明明html路径也有，容器启动正常，就是访问不到。花费了一些时间。知识归纳：在这个实验中，我意识到nginx.conf这个文件针对的是容器内部才有效，而不是看着容器外面的路径。
VUE项目加Base前缀部署，刷新浏览器500 Internal Server Error
灵壹Eli的博客
12-19 674
部署Vue项目的时候，加入base路径，使用nginx代理，第一次访问是正常，刷新浏览器显示500 Internal Server Error。
vue axios调用接口方法报错500 internal server error的解决方法
热门推荐
每天学习一点点
03-13 4万+
前端使用axios 访问后端接口时报错: 在浏览器中点击红色的报错数据,可以看到下图: 从服务器返回的信息可以看出是请求服务器时传递的请求参数存在非法字符,被服务器拦截. 解决办法有两种: 1.把非法字符删除后再请求服务器 2.如果后端是c#接口,可以在web.config文件中做一个配置便可,具体操作如下图所示: 在配置文件中添加红色框中的代码,然后重启服务即...
windows下将vue项目部署到nginx遇到404,500错误
u014220146的博客
06-20 1734
软件环境 windows10 , vue 2.0, nginx-1.22.1, npm 8.1.1在vue项目中使用命令打包项目，在根目录下得到文件夹在nginx官网下载最新的1.22.1版本，在windows下直接解压使用拷贝dist文件夹到nginx根目录下的html文件夹里面在cmd命令行中进入nginx根目录，使用命令启动nginx（重载， 杀死进程打开浏览器，根据配置的端口和ip访问项目。
nginx提示：500 Internal Server Error错误解决办法
01-20
nginx提示：500 Internal Server Error错误解决办法 前言： 今天发现网站无法上传资源和发布文章，通过浏览器查看服务器的返回信息 500 Internal Server Error 刚开始我以为是应用服务器或者是程序异常，检查了下...
nginx提示：500 Internal Server Error错误的解决方法
09-30
解决500 Internal Server Error时，应按照“先易后难”的原则逐步排查，从最简单的配置调整开始，逐渐深入到更复杂的系统资源和权限问题。同时，保持良好的日志管理和监控机制，以便于及时发现和解决问题，确保Nginx...
JavaScript中的对象，入职3个月的前端程序员面临转正，四轮面试后多久出结果
2201_75604580的博客
04-14 514
如果你已经下定决心要转行做编程行业，在最开始的时候就要对自己的学习有一个基本的规划，还要对这个行业的技术需求有一个基本的了解。有一个已就业为目的的学习目标，然后为之努力，坚持到底。如果你有幸看到这篇文章，希望对你有所帮助，祝你转行成功。网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。需要这份系统化的资料的朋友，可以添加V获取：vip1024c （备注前端）一个人可以走的很快，但一群人才能走的更远！
Nginx 部署 Vue 项目报 500 错误
Xu_JL1997的博客
04-25 9547
今天在阿里云的 Ubuntu 上部署一个 Vue 项目，使用 Nginx 做代理，端口能正常访问，但 Nginx 一直响应是 500。 后来发现是 Nginx 访问不了 dist 文件夹，权限的问题，因为我把 dist 放在了 /root 目录下面。将 dist 放在 /var 目录下，问题就解决了。 下面是我的 Nginx 配置文件/etc/nginx/sites-enable/default：...
vue项目前缀nginx部署，解决刷新500 404等问题
weixin_41127362的博客
11-30 2355
vue项目 nginx相关配置
http://localhost:8080/ 无法访问
qq_37744689的博客
10-25 4万+
当http://localhost:8080/ 无法访问，出现以下情况时 解决方案： 打开【控制面板】——【系统和安全】——【Windows防火墙】 点击【打开或关闭Windows防火墙】然后选择【关闭Windows防火墙】 就可以正常访问了 ...
关于vue项目部署到服务器页面刷新会出错（页面报错：500 Internal Server Error）
Namaste_的博客
08-30 1万+
废话少说先上错误图片： 首先分析一下出现这个错误的原因是前端项目路由配置的时候路由的用了history模式(mode: ‘history’)；用这种模式的好处是让我们的URL看起来不像hash那么丑（url中会有#），大家应该都懂，这里就不用多详细介绍了，不过这种模式（history）要玩好，还需要后台配置支持。因为我们的应用是个单页客户端应用，如果后台没有正确的配置，就会返回404，对于后端配...
centos7 使用Nginx部署vue项目 报500 Internal Server Error
05-14
500 Internal Server Error是一个比较常见的错误，表示服务器在执行请求时遇到了错误，但是没有具体说明错误的原因。这种错误通常是因为服务器端代码出现了错误或者配置文件有误。 首先，您可以查看Nginx的错误日志，通常在`/var/log/nginx/error.log`目录下。打开该文件，查看是否有相关的错误信息。 其次，您可以在Nginx的配置文件中添加以下配置： ``` location / { try_files $uri $uri/ /index.html; # 其他配置项 } ``` 这个配置项中的`try_files`指令会尝试访问请求的URI，如果找不到，则会尝试访问同级目录下的index.html文件。这通常是因为Vue项目是一个单页面应用，需要将所有请求都重定向到index.html文件，然后由Vue路由来处理具体的路由。 最后，如果您的Vue项目中使用了后端API，还需要确保API服务已经正确启动，并且Nginx配置文件中已经正确代理了API服务的请求。 如果以上方法都无法解决问题，您可以尝试将您的Nginx配置文件和错误日志提供给我，我可以帮您进一步分析问题。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

大可-

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值