项目场景:

在写Vue3项目的时候,使用了Vue Router前端路由,配置为history模式。进行项目打包上传到服务器的时候,正常测试访问页面,当刷新当前路由的时候,就会出现404的状况,检查日志发现全是No such file or directory目标路径的问题。


问题描述

查询搜索问题,明确表明服务器试图在指定的目录下寻找一个名为recruitment的文件或文件夹,但没有找到。种问题通常与前端路由(如Vue Router)配置为history模式有关,以及服务器配置不正确导致无法正确处理这种模式的路由请求。


原因分析:

对于Vue Router使用History模式

当使用Vue Router的history模式时,浏览器会直接请求像/recruitment这样的路径,而不是请求包含哈希的URL。服务器需要正确配置来支持这种模式,即对于所有的前端路由请求,都应返回入口文件(通常是index.html)。

我们在Vue开发应用的过程中,设置路由的路径不是真实存在的路径,并且使用了history模式。

这是由于我们的应用是一个单页的客户端应用,如果没有适当的服务器配置,用户在浏览器中直接访问https://example.com/user/id(假设此url在开发中是可以访问的),也会得到一个 404 错误。


解决方案:

Nginx服务器配置

如果你使用的是Nginx服务器,确保已经为单页应用(SPA)配置了重写规则,使得所有的前端路由请求都返回index.html。以下是一个基本的Nginx配置示例,用于处理Vue Router的history模式:

server {
    listen       80;
    server_name  (你的IP或者域名);

    location / {
        root   /www/wwwroot你的网站路径/dist;
        try_files $uri $uri/ /index.html;
    }

    # 其他配置...
}

在这个配置中,try_files $uri $uri/ /index.html;指令尝试按顺序提供请求的文件、目录,如果都没有找到,就返回index.html文件,由Vue Router处理路由。

Apache服务器配置

如果你的服务器是Apache,确保.htaccess文件中有类似的重写规则:

<IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteBase /
  RewriteRule ^index\.html$ - [L]
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteRule . /index.html [L]
</IfModule>

 这段配置实现了与Nginx类似的功能,确保所有的前端路由请求都被重定向到index.html

分离Vue项目和PHPMyAdmin的配置

为了避免混淆,建议将Vue项目和PHPMyAdmin配置分开,例如:

# Vue项目配置
server {
    listen 80;
    server_name xxxx;

    root /www/wwwroot/xxxx/dist;
    index index.html;
    
    location / {
        try_files $uri $uri/ /index.html;
    }

    # 其他Vue项目相关配置
}
# PHPMyAdmin配置
server {
    listen 888;
    server_name phpmyadmin; # 建议使用子域名

    root /www/server/phpmyadmin;
    index index.html index.htm index.php;

    # PHPMyAdmin相关配置
    include enable-php.conf;

    location ~ /tmp/ {
        return 403;
    }

    # 其他静态资源和安全配置
}

重新加载Nginx配置

修改配置后,不要忘记重新加载Nginx来应用更改:

sudo nginx -s reload

或者如果你使用的是systemd管理的系统:

sudo systemctl reload nginx
03-16 12:05