升级Node后Vue 2.7项目启动报错：__webpack_require__.context不是函数

问题背景 #

原本基于 Vue 2.7（Vue-cli）、Node 20.11.0 的项目运行正常，创建 Vue 3.5/Vite 新项目并将 Node 升级到 22.15.0 后，启动旧项目时出现报错。即使降级回 Node 20.11.0，问题依然存在。尝试过切换主分支、删除 node_modules/package-lock.json、完全重装 Node，均未解决。

报错信息 #

Uncaught TypeError: __webpack_require__(...).context is not a function
    at loadLocaleMessages (i18n.ts:7:1)
    at getInitialLocale (i18n.ts:32:1)
    at eval (i18n.ts:47:1)
    at ./src/i18n.ts (app.js:2446:1)
    at __webpack_require__ (app.js:4630:32)
    at fn (app.js:4893:21)
    at eval (common.ts:10:63)
    at ./src/instance/common.ts (app.js:2644:1)
    at __webpack_require__ (app.js:4630:32)
    at fn (app.js:4893:21)

解决步骤 #

• 检查全局包污染
  安装 Vite 新项目后，全局的 Vue-cli 或 Webpack 版本可能被更新，导致与旧项目依赖冲突：

  1. 执行 vue --version 查看全局 Vue-cli 版本，旧项目需匹配 Vue 2.7 兼容的版本（推荐 @vue/cli 4.5.x 或 5.x）；
  2. 执行 npm list -g webpack 检查全局 Webpack 版本，若存在高版本，执行 npm uninstall -g webpack webpack-cli 卸载，旧项目应使用 Vue-cli 内置的 Webpack；
  3. 启动项目时用 npx @vue/cli-service serve 强制使用项目本地的 Vue-cli 服务，避免全局版本干扰。

• 清理 npm 缓存与项目残留

  1. 执行 npm cache clean --force 清理 npm 全局缓存；
  2. 删除项目根目录的 node_modules、package-lock.json、node_modules/.cache（若存在）、dist 目录；
  3. 重新执行 npm install 安装依赖，再启动项目。

• 用 nvm 严格隔离 Node 版本
  Mac 下使用 nvm 管理 Node 版本可避免全局版本残留：

  1. 安装 nvm 后，在旧项目根目录创建 .nvmrc 文件，写入 20.11.0；
  2. 终端进入项目目录，执行 nvm use 切换到指定版本；
  3. 重新安装依赖并启动项目。

• 检查项目 Webpack 配置
  查看项目根目录的 vue.config.js，确认是否存在自定义 Webpack 配置禁用了 require.context 相关功能：

  • 确保未移除 ContextReplacementPlugin 或其他 Webpack 内置插件；
  • 若有修改过 resolve 或 module 配置，检查是否破坏了 Webpack 的模块解析逻辑。

• 验证 i18n 代码写法
  报错源于 i18n.ts 的 loadLocaleMessages 函数，确认 require.context 的写法是否正确：

  // 示例正确写法，根据实际目录调整
  const messages = require.context('./locales', true, /\.json$/);
  

  确保目录路径、递归参数、文件名正则均与实际资源匹配。

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