Vue应用部署至GitHub Pages后资源加载404，求解决方案

核心问题是静态资源路径配置错误：你的项目部署在GitHub Pages的子路径/OptimalSity/下，但本地开发用的是根路径，打包后资源引用路径没适配子路径，导致服务器找不到文件。

对应不同项目类型的配置方法 #

1. Vue CLI创建的项目（Vue 2/Vue 3） #

在项目根目录的vue.config.js文件中添加publicPath配置：

module.exports = {
  publicPath: process.env.NODE_ENV === 'production'
    ? '/OptimalSity/' // 生产环境用子路径
    : '/' // 开发环境用根路径
}

如果没有vue.config.js，直接新建一个即可。

2. Vite创建的Vue 3项目 #

在项目根目录的vite.config.js中配置base字段：

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

export default defineConfig({
  plugins: [vue()],
  base: '/OptimalSity/'
})

后续操作步骤 #

• 执行npm run build重新打包项目
• 把打包生成的dist目录下所有文件，推送到GitHub仓库的gh-pages分支（或你在GitHub Pages设置里指定的部署分支）
• 检查GitHub仓库的Pages设置：确认部署分支是gh-pages，且根目录选择/（因为dist的内容已经放在分支根目录）

这样配置后，静态资源、favicon都会以正确的子路径引用，404问题就能解决。

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