Vue项目部署到服务器后刷新404问题

问题原因

Vue中使用了 vueRouter 的 history 模式，这种模式通过修改浏览器的历史记录来实现路由切换，而不是使用传统的URL路径。因此，当用户直接访问某个URL时，服务器端可能没有相应的处理逻辑，就会返回404错误。

解决思路

解决此问题需要在服务器端的配置文件中添加相应的处理逻辑。也就是需要在服务器配置文件中添加一个处理所有请求的默认路由，然后将请求转发到index.html文件。这样，即使用户直接访问某个URL，服务器也能够正确地加载Vue应用，并由Vue Router处理路由。

解决方案

Nginx

在 nginx.conf 中添加配置：

location / {
    try_files $uri $uri/ /index.html;
}

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>

vue-router官方也给出了各种类型服务的 解决方案。