vue项目打包解决Vue Router加载无效(404)报错 No such file or directory

项目场景：

在写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

fanstuck