打包部署后，页面刷新丢失的问题

问题：

前端打包部署后，使用域名加载页面，刚开始进去好使，一刷新就没了。

解决办法：

一：

检查自己的路由模式。如果是history模式改为hash模式即可。

const router = createRouter({
    history: createWebHashHistory(), // 使用 hash 模式
    routes,
});

这时求知的人一定想问为什么。我有一点点小小的拙见：

在前端路由中，使用history模式需要服务器端进行额外的配置，以防止在浏览器刷新的时候无法正确处理路由。因为如果访问的路由和后端接口不一样，可能会返回404错误。而使用hash模式则不需要服务器端配置，因为hash部分不会被浏览器发送到服务器端。

在使用Vue的时候，默认是使用history模式，如果使用history模式时，没有正确配置服务端，可能会出现路由跳转时丢失问题。而使用hash模式则可以避免这个问题，因为hash部分不会影响后端路由。

当然，使用hash模式也有它的缺点，比如URL的可读性比较差。对于需要SEO优化的网站是不利的。所以在选择路由模式时，需要根据实际情况来选择。

二：

当然了，执着的人就想用history模式怎么解决这个问题呢。

那就配置一下。

1.配置 vue.config.js 中的 publicPath

# vue.config.js

module.exports = {
  //根目录
  publicPath: process.env.NODE_ENV === 'production' ? './' : '/',
};
//publicPath 属性用来指定应用程序的基础路径，即应用程序在服务器上的路径。如果不指定它，在使用默认情况下，会将应用程序部署到域的根目录下。
上面的代码将 publicPath 属性设置为环境变量 NODE_ENV 是 production 时的当前路径（'./'），其他情况下为根路径（'/'）。这样做可以保证在开发模式下使用根路径，而在生产模式下使用相对路径，以便正确处理静态资源的引用。
例如，在生产模式下，如果你的应用部署在 http://www.example.com/myapp/ 目录下，那么 publicPath 应该设置为：
publicPath: '/myapp/'

2.配置 vue-router，使用history模式

const router = createRouter({
  //根目录
  history: createWebHistory("/"),
  routes
})

3.配置 nginx 的 server

location / {
    root   /opt/app/fontend;
    index index.html index.htm;
    try_files  $uri $uri/ /index.html;
}

解释一下nginx配置的server代码：

1.location / 指明对所有请求的 URL 地址进行处理。

2.root /opt/app/fontend; 指明当前网站的根目录是 /opt/app/fontend。

3.index index.html index.htm; 指定了当请求路由后的文件名为默认文件 index.html 或者 index.htm 时，Nginx 会首先搜索这些文件，如果文件存在就返回该文件；如果不存在，则和后面的 try_files 一起寻找。

4.try_files $uri $uri/ /index.html; 表示在指定的目录中按照顺序寻找文件，寻找的文件为 $uri 变量的值，如果找到了该文件，则直接返回该文件；如果找不到，则寻找 $uri/ 表示该路径下的目录，如果找到目录，则再次寻找该目录下的默认文件，如果还找不到，则返回 index.html 文件，即该站点的主文件。

这段代码是设置 Nginx 服务器的请求响应规则，当请求路由地址不存在时，将请求指向根目录下的 index.html 文件，同时如果请求的是目录而不是文件，则继续寻找该目录中的默认文件，并返回该文件。同时也处理了文件路径在前端路由中刷新时的问题。

ps:早日实现共同富裕。