如何在Vue3应用中正确安装Vitest并解决webpack编译报错

不需要在webpack polyfill配置上浪费时间，这个报错的核心原因是Vitest、happy-dom、@vue/test-utils都是仅能在Node.js环境运行的测试工具，绝对不能被打包进面向浏览器的前端业务代码。
报错里提到的local-pkg是Vitest的依赖包，内部调用了fs、path这类Node.js专属核心模块，这些模块根本没有浏览器端实现，也不存在可用的兼容polyfill，手动改resolve.fallback解决不了问题。

• 排查错误引入
  先把src目录下所有非测试文件（.vue组件、.js/.ts业务逻辑、页面文件）全部过一遍，找有没有错误import Vitest、@vue/test-utils、happy-dom的语句。这类测试依赖只能在后缀为.test.js/.spec.js/.test.ts/.spec.ts的测试专用文件里引用，出现在业务代码里就会触发这类报错。
• 拆分配置
  不要把Vitest的配置写在vue.config.js这类webpack构建用的配置文件里，单独新建vitest.config.js存放所有测试相关配置，避免执行npm run serve启动开发服务时，webpack去加载那些只在Node端跑的测试依赖。
  可参考以下最小可用配置：
  vue.config.js（仅用于webpack构建，不要引入任何测试相关依赖）

  const { defineConfig } = require('@vue/cli-service')
  module.exports = defineConfig({
    transpileDependencies: true
  })
  

  vitest.config.js（仅在运行测试命令时加载）

  import { defineConfig } from 'vitest/config'
  import vue from '@vitejs/plugin-vue'
  
  export default defineConfig({
    plugins: [vue()],
    test: {
      environment: 'happy-dom'
    }
  })
  

• 清缓存重启
  改完配置后执行以下命令清理构建缓存，再重启服务：

  rm -rf node_modules/.cache
  npm run serve
  

特殊场景说明：如果你确实需要在webpack构建环节调用Node模块，可以通过externals配置把对应模块标记为外部依赖跳过打包，但常规Vue业务项目出现这个报错，全都是误把测试依赖引入浏览器代码导致的，按上面三步排查完就能解决，不需要强行给fs、path加polyfill。

内容的提问来源于stack exchange，提问作者Moisés