在 GitHub Pages 上部署 Nuxt.js 项目的问题

Question

我有一个项目： https://github.com/merrymaker14/vuegl

我决定上传到 GitHub Pages： https://merrymaker14.github.io/vuegl

但他并没有正常浏览这些页面，尽管他似乎已经设置了所有内容。为什么？ 我都是按照官方文档做的。

nuxt.config.js：

/* nuxt.config.js */
// only add `router.base = '/<repository-name>/'` if `DEPLOY_ENV` is `GH_PAGES`
const routerBase = process.env.DEPLOY_ENV === 'GH_PAGES' ? {
  router: {
    base: '/vuegl/'
  }
} : {}

export default {
  mode: 'universal',

  /*
  ** Headers of the page
  */
  head: {
    title: pkg.name,
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      { hid: 'description', name: 'description', content: pkg.description }
    ],
    link: [
      { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
    ]
  },

  /*
  ** Customize the progress-bar color
  */
  loading: { color: '#fff' },

  ...routerBase,

  router: {
     middleware: 'pages',
     //base: '/examples/vuegl/'
  },

  /*
  ** Global CSS
  */
  css: [
  ],

  /*
  ** Plugins to load before mounting the App
  */
  plugins: [
  ],

  /*
  ** Nuxt.js modules
  */
  modules: [
  ],

  /*
  ** Build configuration
  */
  build: {
    /*
    ** You can extend webpack config here
    */
    extend(config, ctx) {
    }
  }
}```

Answer 1

我遇到了同样的问题，这就是我要解决的问题。

1. 添加到nuxt.config.js:

  // Allows page refresh to work on github pages
  generate: {
    fallback: "404.html"
  },

1. 将空白文件 .nojekyll 添加到 static/ 目录（防止 github 将其构建为 Jekyll 站点）

2. 部署时您需要执行gh-pages -d dist -t true（因为默认部署会忽略以'.'开头的文件）

为什么会这样

上述解决方案解决了几个问题。

1. 添加 fallback: "404.html"，这允许 SPA 的（单页应用程序）在 Github 页面上工作。

   1. 像example.github.io/my-nuxt-app/some/page 这样的任何路由都会重定向到自定义的404.html 文件，这将保持SPA 加载。 more info here

2. .nojekyll 阻止 github 将其构建为 Jekyll 站点，如果 gh-pages 站点具有 /pages 目录，Github 会自动认为它是 Jekyll 站点

3. gh-pages -d dist -t true 是必需的，以便 .nojekyll 文件实际部署到 Github Pages，因为默认情况下，gh-pages 命令会忽略以 . 开头的文件