vue3.2项目中使用history路由模式刷新后页面404

一、问题描述

开发过程中，路由可以正常访问，打包后也可以正常访问，但是一刷新页面就会出现404错误

二、解决方案

方法一：修改为Hash路由模式

在router/index.ts文件中，将history路由模式修改为hash路由模式即可。

history路由模式：

history: createWebHistory(import.meta.env.BASE_URL),

hash路由模式：

history: createWebHashHistory(import.meta.env.BASE_URL),

方法二、修改后台伪静态

Nginx：

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

Apache:

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

可以参考下这篇文章《thinkphp6.x+vue3前后端分离项目部署伪静态》