如何修复Nuxt项目中net::ERR_ABORTED 403及Vite服务允许列表外错误？

问题本质 #

浏览器缓存了之前Ex1项目注册的PWA Service Worker，导致运行新项目时，旧的Service Worker仍在尝试加载Ex1项目的本地文件，触发Vite的文件访问白名单限制，从而出现403禁止访问错误。

解决步骤 #

• 清除浏览器缓存与Service Worker
  打开浏览器开发者工具（F12），切换到「Application」标签：

  1. 在左侧「Service Workers」区域，找到对应localhost:3000的服务 worker，点击「Unregister」完成注销
  2. 再到「Storage」区域，点击「Clear site data」清除当前站点的所有缓存数据

• 关闭Ex1项目的PWA开发模式
  修改Ex1项目的nuxt.config.ts，将PWA开发模式禁用，避免后续开发时再次注册干扰性的Service Worker：

  pwa: {
    // 保留其他原有配置
    devOptions: {
      enabled: false, // 将true改为false
      type: "module",
    },
  },
  

• 重启开发服务
  完全关闭VSCode中所有项目的终端进程（确保没有残留的Vite服务器），然后重新启动当前新项目的开发服务（执行npm run dev）

• 可选：显式配置Vite资源白名单
  如果上述步骤后问题仍存在，可在新项目的nuxt.config.ts中添加Vite服务器配置，明确只允许当前项目目录的资源访问：

  export default defineNuxtConfig({
    // 其他原有配置
    vite: {
      server: {
        fs: {
          allow: [process.cwd()], // 限制仅当前项目目录可被Vite访问
        },
      },
    },
  });
  

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