使用 Webpack 动态加载 Vuejs 组件答案

【问题标题】：Dynamically load Vuejs Components using Webpack使用 Webpack 动态加载 Vuejs 组件
【发布时间】：2018-09-13 11:51:15
【问题描述】：

我正在动态加载 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>

【问题讨论】：

你是在问为什么第二个有效，是这样吗？
是的...更新问题

标签： webpack vue.js webpack-2

【解决方案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")
    }
  },

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

Vue.component('test', require('@/components/my-component'))

或使用导入...

从“@/components/my-component”导入 myComponent

希望有帮助

【讨论】：