Nuxt.jsデプロイ、GitHub.io静的jsリソース404エラーの解決方法

現象

• Nuxt.jsのプロジェクトをGitHub.ioにデプロイすると、下記エラーが発生しました。

• 実際にjsファイルがRepositoryに存在します。

原因推測

• Nuxt.jsのGenerateでのフォルダー _nuxt がHTTPの content-security-policy を行いました。セキュリティーのため、_nuxt/*.jsファイルのアクセスを禁止されました。

修正する方法

• nuxt generate 後に Node.js でフォルダーの名を変更します。例えば_nuxt -> static
• nuxt.config.jsの修正も必要です。

nuxt.config.js

{
  // Disable server-side rendering (https://go.nuxtjs.dev/ssr-mode)
  ssr: false,
  // Target (https://go.nuxtjs.dev/config-target)
  target: 'static',
  build: {
    extend(config, { isDev }) {
      if (!isDev) {
        config.output.publicPath = './static/'
      }
  },
  router: {
    mode: 'hash'
  },
}

generate

# command
nuxt generate

ビルドされたファイルはdistにあります。

node.jsの処理

// build/index.js
const fs = require('fs-extra')
const { resolve } = require('path')

// Rename: _nuxt to static
fs.moveSync(resolve(__dirname, '../dist/_nuxt'), resolve(__dirname, '../dist/static'))

// command
node build/index.js

package.json修正

{
  "scripts": {
    "build": "nuxt generate && node build/index.js"
  }
}

一つのコマンドでソールのビルドと、フォルダー名の変更になります。

// command
npm run build

備考

ソース: https://github.com/capricorncd/blog/tree/master/demos/app-website

Github Pages: https://capricorncd.github.io/blog/dist/app-website/