在 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"
  },

2. .nojekyll在static/目录中添加一个空白文件（防止 github 将其构建为 Jekyll 站点）

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

为什么这有效

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

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

   1. 任何类似的路由example.github.io/my-nuxt-app/some/page都将重定向到自定义404.html文件，这将保持 SPA 加载。更多信息在这里

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

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