Vue 2动态引入组件报错：Module not found问题求助

问题场景 #

开发Vue 2组件管理器时，传入异步组件路径@/views/BuilderHtml/Htmls/InfoCreate.vue（文件实际存在对应目录），但动态加载时提示模块找不到。

现有代码 #

组件加载逻辑 #

load(){
  const component = require(`${this.field.vuePath}`).default 
  this.componentPath = component;
},
mounted(){
  this.load();
}

模板代码 #

<component :is="componentPath" />

vue.config.js配置 #

const { defineConfig } = require('@vue/cli-service');
const NodePolyfillPlugin = require("node-polyfill-webpack-plugin");
const path = require('path');
const webpack = require('webpack');

let options = {
  transpileDependencies: true,
  devServer: {
    proxy:'http://localhost:9090',
    historyApiFallback: true
  },
  configureWebpack: {  
    plugins: [
      new NodePolyfillPlugin(),
      // new webpack.ProvidePlugin({
      //     // other modules
      //     introJs: ['intro.js', 'introJs']
      // })
    ],
    resolve: {
      alias: {
        '@': path.resolve(__dirname, 'src')
      }
    },
    optimization: {
      splitChunks: {
        chunks: "all",
      },
    },    
  },
  pluginOptions: {
    vuetober: {
      baseUrl: '/themes/theme-backend/assets',
    },
    i18n: {
      locale: 'pt-br',
      fallbackLocale: 'pt-br',
      localeDir: 'locales',
      enableInSFC: false,
      enableBridge: false
    }
  }
}

module.exports = defineConfig(options);

报错信息 #

Cannot find module '@/views/BuilderHtml/Htmls/InfoCreate.vue'
    at webpackContextResolve (src_components_Layout_FormView_FormFields_Fields_FieldRender_vue-src_components_Layout_FormVi-1cf622.js:1341:11)
    at webpackContext (src_components_Layout_FormView_FormFields_Fields_FieldRender_vue-src_components_Layout_FormVi-1cf622.js:1336:11)
    at VueComponent.loadDynamicComponents (Partial.vue?2049:26:1)
    at VueComponent.mounted (Partial.vue?2049:19:1)
    at invokeWithErrorHandling (vue.runtime.esm.js?c320:2987:1)
    at callHook$1 (vue.runtime.esm.js?c320:4000:1)
    at Object.insert (vue.runtime.esm.js?c320:4391:1)
    at invokeInsertHook (vue.runtime.esm.js?c320:6897:1)
    at VueComponent.patch [as __patch__] (vue.runtime.esm.js?c320:7108:1)
    at Vue._update (vue.runtime.esm.js?c320:3738:1)

排查与解决步骤 #

1. 修复Webpack动态导入限制 #

Webpack编译时需静态识别require/import的路径范围，不能使用完全动态的字符串。修改加载逻辑，保留固定前缀：

// 方案1：使用require（保留固定路径前缀）
load(){
  const fileName = this.field.vuePath.split('/').pop();
  const component = require(`@/views/BuilderHtml/Htmls/${fileName}`).default;
  this.componentPath = component;
}

// 方案2：使用Vue官方异步组件写法（推荐）
load(){
  const fileName = this.field.vuePath.split('/').pop();
  this.componentPath = () => import(`@/views/BuilderHtml/Htmls/${fileName}`);
}

2. 检查路径大小写一致性 #

Linux/macOS文件系统区分大小写，确认路径字符串中的文件名（如InfoCreate.vue）和实际文件的大小写完全匹配。

3. 验证Webpack Alias有效性 #

在项目根目录执行以下代码，确认@指向的路径与实际文件路径一致：

const path = require('path');
console.log(path.resolve(__dirname, 'src/views/BuilderHtml/Htmls/InfoCreate.vue'));

4. 清理缓存重新编译 #

删除node_modules/.cache、dist目录，或执行npm run clean（若配置），再重新运行npm run serve，避免旧缓存干扰路径识别。

5. 确认扩展名配置 #

确保webpack的resolve.extensions包含.vue，默认配置已包含，若有修改需验证：

resolve: {
  extensions: ['.js', '.vue', '.json'],
  alias: {
    '@': path.resolve(__dirname, 'src')
  }
}

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