VUE项目加Base前缀部署，刷新浏览器500 Internal Server Error

原创已于 2025-05-21 13:43:53 修改 · 1.3k 阅读

9 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端 #html

于 2023-12-19 22:57:48 首次发布

运维技术笔记专栏收录该内容

38 篇文章

订阅专栏

文章讲述了在部署Vue项目时，遇到500InternalServerError的问题，原因是Nginx配置中的try_files导致了内部重定向循环。作者提供了三种可能的解决方案，包括指定具体文件路径、使用index.html或使用rewrite规则来避免循环。

部署Vue项目的时候，加入base路径，使用nginx代理，第一次访问是正常，刷新浏览器显示500 Internal Server Error。

存在问题

location /app/ {
    alias /www/wwwroot/test/app/;
    try_files $uri $uri/ /app/index;
}

使用以上配置，在访问的时候一直显示500 Internal Server Error，在其他项目中可以正常使用，在当前新项目却出现500错误，

解决方案

分析nginx的error.log后发现这是因为本项目不存在index这个页面，导致的内部重定向循环引起的。在这个location块中，try_files $uri $uri/ /app/index; 尝试查找文件，如果找不到则重定向到/app/index，导致循环，解决这个问题，可以将try_files指令中的/app/index改为具体的文件路径，或者使用一个合适的rewrite规则：

location /app/ {
    alias /www/wwwroot/test/app/;
    try_files $uri $uri/ /app/;
}

location /app/ {
    alias /www/wwwroot/test/app/;
    try_files $uri $uri/ /app/index.html;
}

location /app/ {
    alias /www/wwwroot/test/app/;
    try_files $uri $uri/ @app;
}

location @app {
    rewrite ^/app/(.*)$ /app/index.html last;
}

根据实际需要，选取一种方式进行配置，确保在修改后重新加载nginx配置即可。