在 github 上配置顶级域和 www 子域变体后网站出现黑屏

Question

我正在使用 vite+svelte 想使用 github pages

托管我的网页

已部署 Vite app 如视频所示 How to Deploy Your Vite App to Github Pages

在 github

上创建存储库 repo1

全部

git init
git add .
git commit -m "comment"
git branch -M main
git remote add origin https:// ........git

更改了 vite.config.js

内的基数 url

import { defineConfig } from 'vite'
import { svelte } from '@sveltejs/vite-plugin-svelte'

// https://vitejs.dev/config/
export default defineConfig({
    base: '/repo1/',
  plugins: [svelte()]
})

npm run build

git add dist -f

git commit -m "add dist"

git subtree push --prefix dist origin gh-pages

得到网站运行这个扩展 https://name.github.io/repo1/

想要将自定义域添加到 repo1

看过这个页面Configuring an apex domain and the www subdomain variant

首先使用 A 记录配置一个顶级域

On GitHub, navigate to your site's repository.

Under your repository name, click  Settings.

Repository settings button

click Pages

Under "Custom domain", type your example.com, then click Save

Check for CNAME created inside repo1 containing example.com

Changed A record in DNS provider

185.199.108.153
185.199.109.153
185.199.110.153
185.199.111.153

然后使用您的 DNS 提供商配置 CNAME 记录

类型CNAME名称www.example.com数据username.github.io.

确认 DNS 记录是否使用

正确配置

dig WWW.EXAMPLE.COM +nostats +nocomments +nocmd

我必须得到这个输出

> ;WWW.EXAMPLE.COM.                     IN      A
    > WWW.EXAMPLE.COM.              3592    IN      CNAME   YOUR-USERNAME.github.io.
    > YOUR-USERNAME.github.io.      43192   IN      CNAME    GITHUB-PAGES-SERVER .
    >  GITHUB-PAGES-SERVER .         22      IN      A       192.0.2.1

但是我得到的是

;WWW.EXAMPLE.COM.   IN  A
WWW.EXAMPLE.COM. 9999   IN  CNAME   YOUR-USERNAME.github.io.
YOUR-USERNAME.github.io. 9999 IN    A   185.199.111.153
YOUR-USERNAME.github.io. 9999 IN    A   185.199.109.153
YOUR-USERNAME.github.io. 9999 IN    A   185.199.110.153
YOUR-USERNAME.github.io. 9999 IN    A   185.199.108.153

我从来没有得到这些

username 指向 github-pages-server

> YOUR-USERNAME.github.io. 43192 IN CNAME GITHUB-PAGES-SERVER .

github-pages-server 指向 IP

> GITHUB-PAGES-SERVER . 22 IN A 192.0.2.1

当我尝试检查 www.example.com 我的自定义域时，我在网站上收到 blank white screen 没有 errors 或 warning 的消息，只是一个白屏

我遇到了这个How to Configure GitHub Pages Custom Domain? (Google Domains | Subdomain & Apex Domain)

他也在 blank white screen 页面加载时没有任何类型的 error 或 warning 消息，就像我的 inspects 页面在 console

当我检查我的自定义域时 inspect -> console

甚至我也收到了类似的警告

example.com/:8
GET https://example.com/repo1/assets/index.b0a7898d.js net::ERR_ABORTED 404
example.com/:9          
GET https://example.com/repo1/assets/vendor.8c7ac98a.js net::ERR_ABORTED 404
example.com/:10          
GET https://example.com/repo1/assets/index.897361a6.css net::ERR_ABORTED 404

他在里面加了主页package.json

  "homepage": "https://example.com",

保存将代码推送到 github，网站开始运行

我该如何纠正？

我是否在 package.json 中添加“主页”：“https://example.com”？

或

我是否应该将 vite.config.js 中的 base URL 从 /repo1/ 更改为 example.com？

或

我错过了什么吗？

我很困惑请帮忙

Answer 1

阅读 vite 文档

base需要在vite.config.js

里面指定

base
    Type: string
    Default: /
    Base public path when served in development or production. Valid values include:
        Absolute URL pathname, e.g. /repo-name/
        Full URL, e.g. https://example.com/
        Empty string or ./ (for embedded deployment)

默认vite.config.js文件内容如下

import { defineConfig } from 'vite'
import { svelte } from '@sveltejs/vite-plugin-svelte'

export default defineConfig({
  plugins: [svelte()]
})

使用 https://user-name.github.io/repo-name/ 部署时添加 base 和 repo-name

import { defineConfig } from 'vite'
import { svelte } from '@sveltejs/vite-plugin-svelte'

export default defineConfig({
    base: '/repo-name/',
  plugins: [svelte()]
})

使用 https://example.com 部署时（您的自定义域）用 https://example.com

添加基础

import { defineConfig } from 'vite'
import { svelte } from '@sveltejs/vite-plugin-svelte'

export default defineConfig({
    base: 'https://example.com/',
  plugins: [svelte()]
})

然后 npm run build 更新到您的 github 存储库，步骤相同

得到我的网站运行

在 github 上配置顶级域和 www 子域变体后网站出现黑屏

blank screen on website after configuring apex domain and www subdomain variant on github

dns

github-pages

svelte

vite