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

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

添加到nuxt.config.js：

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

将空白文件.nojekyll添加到static/目录中（防止github将其构建为Jekyll站点）
部署时，您需要执行gh-pages -d dist -t true（，因为默认部署会忽略以'。'开头的文件）

为什么行得通

上述解决方案可以解决几个问题。

添加fallback: "404.html"，这允许 SPA 的（单页应用程序）在Github Pages上工作。
1. 任何路由，例如example.github.io/my-nuxt-app/some/page都将重定向到自定义404.html文件，这将使SPA保持加载状态。 more info here
.nojekyll阻止github将其构建为Jekyll站点，如果Github具有/pages目录，则它会自动认为gh-pages站点是Jekyll站点
gh-pages -d dist -t true是必需的，以便将.nojekyll文件实际部署到Github Pages，默认情况下，gh-pages命令将忽略以.开头的文件

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

1 个答案:

为什么行得通