项目是使用的vue3+vite进行开发的，打包后放在网站的二级目录下(不是二级目录也可能会出现这情况)。如何进行二级目录配置，可以参考文章：vue3+vite项目配置二级目录访问。
项目部署后所有功能一切正常，但是当我们刷新页面的时候，就会出现404错误。原因也比较简单：我们以 http://fachele.cn 域名为例进行说明(服务端以nginx为例)。
假设：http://fachele.cn/article 指向服务器的 /site 目录。当我们访问 http://fachele.cn/article 的时候，服务器其实是去它的 /site 目录下找 index.html，也就是我们项目打包后生成的那个index.html，然后将该文件(以及相关资源)下载到浏览器然后渲染。
对于单页面应用来说，所有资源通过本次下载，已经下载到本地了，后续咱们得页面跳转其实就是显示的不同的组件内容。不会再往服务端发送请求(请求接口除外)。当我们使用history路由时，url很好看，和真实的url一模一样，比如我们访问 http://fachele.cn/article/console，其实咱们的程序展示的是路由中 path：/console对应的组件内容，一切正常。
但是，当我们刷新的时候，那个url会向服务端发送真实的请求，比如：http://fachele.cn/article/console，如果没有额外的配置，服务器会去找 /site/console 文件，这个文件当然是不存在的，所以报404。
明白了原因，那么解决方案也就出来了，只需要配置nginx 在请求的资源找不到的时候，重定向到咱们的项目入口文件：index.html 即可。
修改nginx的配置(别忘了重启nginx)：
location ^~ /article/ {
alias /site/; #这是咱们的vue项目部署的目录
try_files $uri $uri/ /article/index.html; # 如果最终找不到，则重定向到 /article/index.html
}try_files的作用是按顺序检查文件是否存在，返回第一个找到的文件或文件夹(结尾加斜线表示为文件夹)，如果所有的文件或文件夹都找不到，会进行一个内部重定向到最后一个参数。
比如我们前面的那个地址： http://fachele.cn/article/console，按照上面的配置就是：先找 http://fachele.cn/article/console 对应的文件，如果找不到，去找 http://fachele.cn/article/console/ 目录对应的目录，如果都找不到，重定向到 http://fachele.cn/article/index.html
注意，我看网上有人说还需要配置 publicPath 项，我估计他用的不是vite，我用的是vite，没有配置它，一切正常。
