Vue项目npm run build后dist/index.html空白，求助生成Github Pages静态页

问题根源 #

你遇到的空白页面问题，核心是资源路径配置错误：

• Vite默认的base路径为/（根路径），本地直接打开dist/index.html时用的是file://协议，资源会尝试从系统根目录加载，而非dist文件夹内，导致资源找不到；
• 部署到Github Pages时，你的项目会放在https://<用户名>.github.io/<仓库名>/这样的子路径下，默认根路径也会匹配错误。

解决步骤 #

1. 修改Vite配置文件 #

打开项目根目录下的vite.config.js，添加base配置：

• 如果只是本地测试打开dist文件，设置为相对路径：

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

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

• 如果是部署到Github Pages，把base改成你的仓库名称（比如仓库名为my-vue-demo）：

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

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

2. 重新构建项目 #

在项目目录下执行：

npm run build

3. 验证效果 #

• 本地测试：直接打开dist/index.html，页面应该正常显示；
• Github Pages部署：
  • 把dist文件夹内的所有文件上传到仓库的gh-pages分支，或者在仓库的「Settings」→「Pages」中，将「Source」设置为main分支的/dist文件夹（需确保仓库已公开）。

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