Vue.js 在 GitHub Pages 上部署 Vue 项目遇到的问题

在本文中，我们将介绍在使用 Vue.js 构建的项目部署到 GitHub Pages 上时可能遇到的一些常见问题，并提供相应的解决方案和示例说明。

问题1：页面无法加载或显示空白

当我们在 GitHub Pages 上部署 Vue 项目时，最常见的问题之一就是页面无法加载或者显示空白。这通常是因为 GitHub Pages 默认是以静态网页的形式部署项目，而 Vue 项目则是一个单页应用，它需要通过路由来管理页面的切换。这就需要我们进行一些特殊的配置。

解决方案：
1. 在项目根目录下创建一个名为 404.html 的文件，内容如下：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Page not found</title>
  </head>
  <body>
    <script>
      // 如果页面找不到，将会重定向到根URL并重新加载应用程序
      window.location.href = '/';
    </script>
  </body>
</html>

这样当页面找不到时，将会重定向到根URL并重新加载应用程序。

修改 vue.config.js 的配置文件，在 publicPath 中增加项目的仓库名称，示例如下：

module.exports = {
  publicPath: process.env.NODE_ENV === 'production'
    ? '/<repository-name>/'
    : '/'
}

这样可以确保资源文件正确引用。

问题2：路由刷新后页面报错

当我们使用 Vue Router 进行页面导航时，如果在路由跳转后刷新页面，会导致页面报错。这是因为在默认情况下，GitHub Pages 会直接请求刷新后的 URL，而此时服务器并未配置对应的路由规则。

解决方案：
1. 在 404.html 中添加如下代码：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Page not found</title>
  </head>
  <body>
    <script>
      // 如果找不到页面，将会重定向到根URL并重新加载应用程序
      if (location.pathname !== '/<repository-name>/') {
        window.location.href = '/';
      }
    </script>
  </body>
</html>

这样当页面找不到时，只有当路径不是根URL时，才会重定向到根URL并重新加载应用程序。

修改 vue.config.js 的配置文件，在 history 模式下新增以下代码：

module.exports = {
  mode: 'history',
  routes: [
    {
      path: '/<repository-name>',
      component: MainComponent
    }
  ]
}

这样可以配置一个路由规则，使得当路径为根URL时，加载对应的组件。

问题3：资源文件无法加载

当在 GitHub Pages 上部署 Vue 项目时，由于默认的部署路径不同，可能会导致资源文件无法正确加载。

解决方案：
1. 在 vue.config.js 的配置文件中新增如下代码：

module.exports = {
  publicPath: '/<repository-name>/',
  outputDir: 'dist'
}

这样可以确保资源文件正确引用，并将打包后的文件输出到 dist 目录中。

总结

通过本文，我们介绍了在将 Vue 项目部署到 GitHub Pages 上可能遇到的一些问题以及相应的解决方案。包括页面无法加载、路由刷新后报错以及资源文件无法加载等问题。我们提供了具体的解决方案和示例说明，希望对你在 GitHub Pages 部署 Vue 项目时有所帮助。如果遇到其他问题，可以查阅 Vue.js 官方文档或寻求开发者社区的帮助。祝你在 Vue.js 开发和部署的路上一帆风顺！