Vite项目空白页报错：请求URL不在服务允许列表的解决问询

问题根源 #

1. vite.config.js存在语法错误（缺失闭合大括号），导致自定义的文件系统权限配置未生效
2. 项目路径包含#特殊字符，触发了Vite默认的文件系统访问限制规则

解决方案 #

步骤1：修复并调整Vite配置 #

修改vite.config.js，补全语法错误并显式允许项目根目录的文件访问：

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

export default defineConfig({
  plugins: [react()],
  server: {
    fs: {
      // 显式授权当前项目根目录下的文件被Vite服务访问
      allow: [path.resolve(__dirname)]
    }
  }
})

步骤2：重启开发服务 #

修改配置后，必须停止当前运行的npm run dev（或对应启动命令），重新执行启动命令让新配置生效。

可选临时排查方案（不推荐用于生产） #

若上述方法未生效，可临时关闭Vite的严格文件系统检查验证问题：

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

export default defineConfig({
  plugins: [react()],
  server: {
    fs: {
      strict: false
    }
  }
})

额外检查项 #

• 确认index.html中的<script>路径/src/main.jsx与项目目录结构完全匹配
• 若仍有异常，可删除node_modules和package-lock.json，重新执行npm install后再启动服务

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