再也不用担心 Vue 部署后刷新 404 啦！

2024-01-15 02:51:46

前言

随着 Vue.js 框架的日益流行，越来越多的前端开发者开始使用 Vue 来构建单页面应用（SPA）。然而，在 Vue 应用部署到生产环境后，经常会遇到一个问题：刷新页面时，会出现 404 错误。这个问题的原因在于，Vue 是一个单页面应用框架，它使用前端路由来管理页面之间的切换。当用户刷新页面时，浏览器会向服务器发送一个请求，请求的路径通常是 /index.html。但是，在 Vue 应用中，/index.html 文件只是一个占位符，它并不包含任何实际的内容。因此，服务器会返回一个 404 错误。

解决方案

解决方案一：覆盖所有路由情况

一种解决 Vue 部署后刷新 404 问题的方法是在 Vue 应用中覆盖所有路由情况，然后给出一个 404 页面。具体步骤如下：

在 Vue 应用中，创建一个新的组件，命名为 NotFound。这个组件将作为 404 页面。
在 NotFound 组件中，编写以下代码：

<template>
  <div>
    <h1>404 Not Found</h1>
  </div>
</template>

<script>
export default {
  name: 'NotFound'
}
</script>

在 Vue 应用的路由配置中，添加以下代码：

{
  path: '*',
  component: NotFound
}

重新构建 Vue 应用，然后将其部署到生产环境。

现在，当用户刷新页面时，浏览器会向服务器发送一个请求，请求的路径是 /index.html。服务器会返回一个 200 OK 的响应，并且会将 index.html 文件发送给客户端。客户端收到 index.html 文件后，会解析该文件并渲染出 Vue 应用。由于 Vue 应用中已经覆盖了所有路由情况，因此不会出现 404 错误。