Vue PWA从require.context迁移至import.meta.webpackContext遇报错

问题原因 #

webpack 5已不再推荐使用import.meta.webpackContext这类非标准内部API，该语法不仅会触发编译警告，还可能因API变更导致运行时报错。

正确解决方案：使用webpack 5原生支持的import.meta.glob #

直接替换为符合ESM规范的glob导入语法，这是webpack 5官方推荐的写法：

// 替换原import.meta.webpackContext代码
const icons = import.meta.glob('../components/icon/icon*.vue');

组件注册示例（如需全局注册图标组件） #

Vue 2项目：

// 遍历匹配组件并全局注册
for (const [path, componentLoader] of Object.entries(icons)) {
  // 从路径中提取组件名，比如从../components/icon/IconUser.vue得到IconUser
  const componentName = path.split('/').pop().replace('.vue', '');
  Vue.component(componentName, componentLoader);
}

Vue 3项目：

// 在main.js中执行注册
for (const [path, componentLoader] of Object.entries(icons)) {
  const componentName = path.split('/').pop().replace('.vue', '');
  app.component(componentName, componentLoader);
}

额外说明 #

• import.meta.glob是webpack 5原生支持的ESM语法，完全适配你的迁移需求，不会触发编译警告。
• 它的参数逻辑和require.context对齐：第一个参数为匹配路径，默认不递归子目录（对应原写法的false），第三个参数用glob模式匹配文件名（icon*.vue等价于原正则/icon.*\.vue/）。

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