Vue项目Nginx部署404问题解决方案：宝塔面板配置详解

Vue项目Nginx部署404问题解决方案：宝塔面板配置详解

引用

CSDN

1.

https://m.blog.csdn.net/m0_74824483/article/details/145227650

在使用Vue进行前端开发时，如果项目采用了history模式的路由配置，那么在通过Nginx进行服务器部署后，可能会遇到页面刷新或非根目录访问时出现404错误的问题。本文将详细介绍如何通过修改Nginx配置来解决这一常见问题，特别是针对使用宝塔面板的用户。

问题背景

当你使用Nginx部署前端项目时，如果项目使用了Vue的history模式路由配置，可能会遇到以下情况：

• 页面刷新时出现404错误
• 非根目录访问页面时出现404错误

解决方案

使用宝塔面板的用户

如果你使用的是宝塔面板，修改Nginx配置相对简单，只需要添加一行代码即可。具体步骤如下：

1. 部署网站后，在宝塔面板中点击设置
   

2. 在设置中的配置文件中，找到server块，在其中添加以下代码：

try_files $uri $uri/ /index.html; #解决刷新页面变成404问题的代码

3. 保存配置后立即生效，可以立即测试效果。

非宝塔面板用户

如果你没有使用宝塔面板，可以直接找到项目对应的nginx.conf文件，进行如下修改：

server {
    listen 8081;
    server_name 地址;
    index index.php index.html index.htm default.php default.htm default.html;
    root 目录;

    # gzip on;
    # gzip_min_length 1k;
    # gzip_comp_level 9;
    # gzip_types text/plain application/javascript application/x-javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png;
    # gzip_vary on;
    # gzip_disable "MSIE [1-6].";

    try_files $uri $uri/ /index.html;    #解决刷新页面变成404问题的代码

    #SSL-START SSL相关配置，请勿删除或修改下一行带注释的404规则
    #error_page 404/404.html;
    #SSL-END
    #ERROR-PAGE-START  错误页配置，可以注释、删除或修改
    #error_page 404 /404.html;
    #error_page 502 /502.html;
    #ERROR-PAGE-END
    #PHP-INFO-START  PHP引用配置，可以注释或修改
    include enable-php-80.conf;
    #PHP-INFO-END
    #REWRITE-START URL重写规则引用,修改后将导致面板设置的伪静态规则失效
    include /www/server/panel/vhost/rewrite/lin-blog.com.conf;
    #REWRITE-END
    #禁止访问的文件或目录
    location ~ ^/(.user.ini|.htaccess|.git|.env|.svn|.project|LICENSE|README.md)
    {
        return 404;
    }
    #一键申请SSL证书验证目录相关设置
    location ~ .well-known{
        allow all;
    }
    #禁止在证书验证目录放入敏感文件
    if ( $uri ~ "^/.well-known/.*.(php|jsp|py|js|css|lua|ts|go|zip|tar.gz|rar|7z|sql|bak)$" ) {
        return 403;
    }
    location ~ .*.(gif|jpg|jpeg|png|bmp|swf)$
    {
        expires      30d;
        error_log /dev/null;
        access_log /dev/null;
    }
    location ~ .*.(js|css)?$
    {
        expires      12h;
        error_log /dev/null;
        access_log /dev/null;
    }
    access_log  /www/wwwlogs/xxx.log;
    error_log  /www/wwwlogs/xxx.com.error.log;
}

主要就是在server块中添加一行代码：

try_files $uri $uri/ /index.html; #解决刷新页面变成404问题的代码

通过上述配置，可以确保在使用history模式的Vue项目中，页面刷新或非根目录访问时不会出现404错误。