Question

我动态加载vue组件。然而，它无法找到路径。如何设置webpack以便我可以将完整路径添加到数组中而不是在require？

中连接它

不起作用

Vue.component(title, require(file));
<sau-page-nav :components="{{json_encode(['AddCredit'=>'../billing/AddCredit','PayPal'=>'../billing/PayPal'])}}"></sau-page-nav>

作品

Vue.component(title, require('../' + file));

<sau-page-nav :components="{{json_encode(['AddCredit'=>'billing/AddCredit','PayPal'=>'billing/PayPal'])}}"></sau-page-nav>

Answer 1

您可以使用webpack.config来解析路径的快捷方式...

这是来自使用Vue cli ...

启动项目时出现的webpack

  resolve: {
    extensions: ['.js', '.vue', '.json'],
    alias: {
      'vue$': 'vue/dist/vue.esm.js',
      '@': resolve('src'),
      modernizr$: path.resolve(__dirname, "../.modernizrrc")
    }
  },

这是重要的@位 - 看看如何引用src目录。这允许您在没有完整路径的情况下引用组件。像这样......

Vue.component（'test'，require（'@ / components / my-component'））

或使用导入...

从'@ / components / my-component'

导入myComponent

希望有所帮助

使用Webpack动态加载Vuejs组件

1 个答案: