Vue3.2项目打包后404问题

项目路由是使用 createWebHistory 模式的

const router = createRouter({
  history: createWebHistory(),
  routes: [
   
  ],
});

nginx配置：

location ^~ /{
    # root html/;
    index index.html;
    try_files $uri $uri/ /index.html;
}

此时发现进去首页之后，只要不是根路径，就会404，刷新也会。

解决方法

在nginx配置加上下面的代码：

location @rewrites {
    rewrite ^.*$ /index.html last;
}

代码解释：

这是一个 Nginx 的配置语法，它定义了一个名为 @rewrites 的位置块，并使用 rewrite 指令将所有请求重写到 /index.html 页面上。

具体来说，这个配置块告诉 Nginx 在处理请求时，无论请求的是什么路径，都将其重写到 /index.html 页面上，并使用 last 标志表示这是重写规则链的最后一个规则。

这种配置常用于使用前端框架（如 Angular、React、Vue.js）构建的单页应用程序，其中所有的路由都由前端框架处理。通过将所有请求重写到 index.html，确保前端框架能够正确处理这些请求并呈现相应的页面。