我正在通过运行“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图像存在!为什么它不能加载它呢?
事实证明,这都是将“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 }}