• • 此问题在此处已有答案**：

Vue js import components dynamically（4个答案）
2天前关闭。
我在试图动态使用Vue 2中的组件时遇到了一个问题。例如，我创建了一个使用管理其他组件的组件。问题是，当我试图传递一个异步组件时，它说没有找到模块，即使模块存在于正确的目录中。
我运行了以下测试以尝试解决我的问题。

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

模板

.....
<component :is="componentPath" />

如果在下面显示我的文件目录，则此变量this. field. vuePath的路径为"@/views/BuilderHtml/Htmls/InfoCreate. vue "：

我的文件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)