Vite构建的React项目部署GitHub Pages出现静态资源404报错

静态资源404/路径重复问题 #

该问题由Vite默认根路径配置不匹配GitHub Pages子路径规则导致，手动修改编译后文件会触发二次路径拼接，出现仓库名重复的问题，按以下步骤修改配置即可：

• 打开项目根目录下的vite.config.js（TypeScript项目对应vite.config.ts）
• 在配置项中新增base字段，取值为/你的仓库名/，示例如下（仓库名为Atmosphere）：

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

export default defineConfig({
  plugins: [react()],
  base: '/Atmosphere/'
})

• 保存配置后重新执行npm run build命令，直接部署新生成的dist文件夹即可，无需手动修改编译后的任何文件。

Permissions-Policy header报错问题 #

该报错是GitHub Pages服务端默认返回的响应头中包含了已被浏览器废弃的interest-cohort特性字段，属于服务端配置问题，不会影响站点的正常运行：

• 若需要消除该警告，可在项目根目录的index.html的head标签内添加如下meta标签：

<meta http-equiv="Permissions-Policy" content="interest-cohort=()">

• 不处理该警告也不会对站点功能产生任何负面影响。

内容的提问来源于stack exchange，提问作者Brijraj