如何在github页面上托管qwik框架？

Question

我尝试使用文档这里和这里来生成静态文件并将它们放到docs文件夹中，但是由于某种原因，站点看起来已经崩溃了。分裂的JS文件在使用自动生成的GitHub URL https://github.com/<UserID>/<RepoName>时不能正常工作。因此，我最终使用了我自己的一个子域，并在这篇文章中发布了错误。

我的vite.config.ts

import { qwikCity } from "@builder.io/qwik-city/vite";
import { qwikVite } from "@builder.io/qwik/optimizer";
import { defineConfig } from "vite";
import tsconfigPaths from "vite-tsconfig-paths";

export default defineConfig(() => {
  return {
    ssr: { target: "node", format: "cjs" },
    plugins: [
      qwikCity(),
      qwikVite({
        client: {
          outDir: "docs/",
        },
      }),
      tsconfigPaths(),
    ],
  };
});

我的entry.static.tsx

import { qwikCityGenerate } from '@builder.io/qwik-city/static/node';
import { join } from 'path';
import { fileURLToPath } from 'url';
import render from './entry.ssr';

// Execute Qwik City Static Site Generator
qwikCityGenerate(render, {
  origin: 'https://qwik.builder.io/',
  outDir: join(fileURLToPath(import.meta.url), '..', '..', 'docs'),
});

还有我的package.json

 "name": "my-qwik-basic-starter",
  "description": "Recommended for your first Qwik app (comes with Qwik City)",
  "engines": {
    "node": ">=15.0.0"
  },
  "private": true,
  "scripts": {
    "build": "qwik build",
    "build.client": "vite build",
    "build.full": "npm run build && npm run build.static && node server/entry.static.js",
    "build.preview": "vite build --ssr src/entry.preview.tsx",
    "build.static": "vite build --ssr src/entry.static.tsx",
    "build.types": "tsc --incremental --noEmit",
    "dev": "vite --mode ssr",
    "dev.debug": "node --inspect-brk ./node_modules/vite/bin/vite.js --mode ssr --force",
    "fmt": "prettier --write .",
    "fmt.check": "prettier --check .",
    "lint": "eslint \"src/**/*.ts*\"",
    "preview": "qwik build preview && vite preview --open",
    "ssg": "node server/entry.static",
    "start": "vite --open --mode ssr",
    "qwik": "qwik"
  },
  "devDependencies": {
    "@builder.io/qwik": "0.10.0",
    "@builder.io/qwik-city": "0.0.112",
    "@types/eslint": "8.4.6",
    "@types/node": "latest",
    "@typescript-eslint/eslint-plugin": "5.40.0",
    "@typescript-eslint/parser": "5.40.0",
    "eslint": "8.25.0",
    "eslint-plugin-qwik": "0.10.0",
    "node-fetch": "3.2.10",
    "prettier": "2.7.1",
    "sass": "^1.55.0",
    "typescript": "4.8.4",
    "vite": "3.1.7",
    "vite-tsconfig-paths": "3.5.1"
  },
  "dependencies": {
    "firebase": "^9.12.0",
    "minimasonry": "^1.3.0"
  }
}

试图运行npm run build.full

在控制台中获取这些错误

Uncaught (in promise) TypeError: Cannot read properties of undefined (reading '_qc_')
    at ee (q-9c2a9820.js:2:28350)
    at S (q-9c2a9820.js:2:28367)
    at q-9c2a9820.js:2:27830
    at Or (q-9c2a9820.js:2:28337)
    at Us (q-9c2a9820.js:2:17115)
    at Vs (q-9c2a9820.js:2:17549)
    at c ((index):8:2636)

Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'Dt')
    at Vs (q-9c2a9820.js:2:17567)
    at c ((index):8:2636)

不知道我在这里错过了什么。

谢谢!

Answer 1

使用"@builder.io/qwik": "0.11.0"和"@builder.io/qwik-city": "0.0.112"

并运行"build.full": "npm run build && npm run build.ssg && npm run ssg"

run build.ssg蜂毛"build.ssg": "vite build --ssr src/entry.static.tsx"

我能够在Github上部署这个回购，这里。使用此部署脚本：

  web-deploy:
    name:  Deploy
    runs-on: ubuntu-latest
    if: github.ref == 'refs/heads/master'
    steps:
      - name: Setup Node.js for use with actions
        uses: actions/setup-node@v1
        with:
          node-version: 16

      - name:  Get latest code
        uses: actions/checkout@v2.5.0

      - name: Clean install dependencies
        run: npm ci

      - name: Build app
        run: npm run build && npm run build.ssg && npm run ssg

      - name: deploy
        uses: peaceiris/actions-gh-pages@v3
        with:
          github_token: ${{ secrets.GITHUB_TOKEN }}
          publish_dir: ./dist