带有 nuxt-svgo 的 Github 页面上的 Nuxt 3：“无法在‘文档’上执行‘createElement’：提供的标签名称”

Question

我正在通过运行“npm generate”构建静态文件来构建我的 Nuxt 3 应用程序到 Github Pages。虽然开发和生产构建在本地运行良好，但当它被推送到 Github Pages 时就无法运行。

当我打开 Github Pages 站点时，出现错误：

Failed to execute 'createElement' on 'Document': The tag name provided ('https://customdomain.com/_nuxt/logo.6cc77fc4.svg') is not a valid name.

令我困惑的是，当我导航到

https://customdomain.com/_nuxt/logo.6cc77fc4.svg

时，SVG图像存在！为什么它不能加载它呢？

Answer 1

事实证明，这都是将“actions/configure-pages@v3”操作作为我的 Github Actions 部署工作流程中的一个步骤运行的副作用。我从 GitHub 自己的模板中复制了该文件，但使用它导致我网站的某些部分无法构建——包括 svgs、TailwindCSS 等

这是我最终的工作流程文件：

# Sample workflow for building and deploying a Nuxt site to GitHub Pages
#
# To get started with Nuxt see: https://nuxtjs.org/docs/get-started/installation
#
name: Deploy Nuxt site to Pages

on:
  # Runs on pushes targeting the default branch
  push:
    branches: ['main']

  # Allows you to run this workflow manually from the Actions tab
  workflow_dispatch:

# Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages
permissions:
  contents: read
  pages: write
  id-token: write

# Allow only one concurrent deployment, skipping runs queued between the run in-progress and latest queued.
# However, do NOT cancel in-progress runs as we want to allow these production deployments to complete.
concurrency:
  group: 'pages'
  cancel-in-progress: false

jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout
        uses: actions/checkout@v3
      - name: Setup Node
        uses: actions/setup-node@v3
        with:
          node-version: '16'
          cache: npm
          cache-dependency-path: './package-lock.json'
      - name: Install dependencies
        run: npm install
      - name: Static HTML export with Nuxt
        run: npm run generate
      - name: Deploy
        uses: JamesIves/github-pages-deploy-action@v4
        with:
          branch: gh-pages # The branch the action should deploy to.
          folder: .output/public # The folder the action should deploy.
          token: ${{ secrets.ACCESS_TOKEN }}