解决 GitHub Pages 上 Vue.js 应用程序的自定义域 404 错误

vue.js

2024-03-15 04:41:49

在 GitHub Pages 中修复 Vue.js 应用程序的自定义域 404 错误

问题简介

在 GitHub Pages 上部署 Vue.js 应用程序时，使用自定义域会导致 404 错误。这是因为 GitHub Pages 使用其服务器的 CNAME 记录，而 Vue.js 应用程序使用单页面应用程序 (SPA) 路由。

原因分析

SPA 路由不会在服务器端创建单独的 HTML 文件，因此当请求不存在的页面时，服务器无法找到相应的 HTML 文件并返回 404 错误。

解决方案

解决此问题的步骤如下：

1. 创建 404.html 文件

在应用程序的根目录中创建名为 404.html 的文件，并将其内容替换为以下代码：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  
</head>
<body>
  <h1>404 Not Found</h1>
  <p>The page you are looking for could not be found.</p>
</body>
</html>

这将告诉 GitHub Pages 在找不到相应的 HTML 文件时显示此页面。

2. 使用 History 模式

在 Vue.js 应用程序的根实例中，将路由模式设置为 history 模式：

new VueRouter({
  mode: 'history',
  routes: [...]
})

History 模式使用浏览器的历史记录 API 来管理路由，而不是在 URL 中使用 hash。

3. 修改 package.json

在 package.json 文件中添加 homepage 字段：

"homepage": "https://www.example.com/",

其中 example.com 是您的自定义域。这告诉 GitHub Pages 应用程序的基本 URL，以便它可以正确解析 URL 并显示相应的 HTML 文件。

4. 部署到 GitHub Pages

将更改推送到 GitHub 仓库后，选择自定义域并再次部署到 GitHub Pages。

原理解释

创建 404.html 文件消除了 404 错误，因为 GitHub Pages 在找不到相应 HTML 文件时会显示此文件。History 模式通过禁用 hash 路由来解决 SPA 路由问题。修改 package.json 中的 homepage 字段可确保 GitHub Pages 正确解析 URL 并显示相应的 HTML 文件。

代码示例

<template>
  <div>
    <h1>标题</h1>
    <p>内容</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      title: '这是一个 Vue.js 应用程序',
      content: '它现在可以在 GitHub Pages 上使用自定义域访问'
    };
  }
};
</script>