Github.io部署nuxt.js生成的静态文件404问题解决方法


现象

使用Nuxt.js开发的个人页面，部署到Github.io后，_nuxt/*.js等静态问题不能访问，提示404错误。

在这里插入图片描述
js文件实际上市存在的

在这里插入图片描述

原因推测

nuxt generate后的文件名(_nuxt/*.js)比较特殊，触发了Github.io的 content-security-policy，所以被禁止访问。

在这里插入图片描述

解决方法

使用Node.js修改nuxt generate 后的文件夹名称。把_nuxt 改成 static 之类的。

同时nuxt.config.js也做相应的修改。

nuxt.config.js

1
2
3
4
5
6
7
8
9
10
11
12
13
{<!-- -->
  // Target (https://go.nuxtjs.dev/config-target)
  target: 'static',
  build: {<!-- -->
    extend(config, {<!-- --> isDev }) {<!-- -->
      if (!isDev) {<!-- -->
        config.output.publicPath = './static/'
      }
  },
  router: {<!-- -->
    mode: 'hash'
  },
}

node.js文件夹重命名处理

1
2
3
4
5
6
// 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'))

package.json修正

1
2
3
4
5
{<!-- -->
  "scripts": {<!-- -->
    "generate": "nuxt generate && node build/index.js"
  }
}
1
2
// command
npm run generate

备注

详细代码：https://github.com/capricorncd/blog/tree/master/demos/app-website

部署完成的页面: https://capricorncd.github.io/blog/dist/app-website/