从本地文件（真正）动态加载 vue 组件

Question

是否可以在运行时动态加载vue组件（在电子应用程序中构建插件系统）？

组件在特定文件中
它的路径只有在运行时才知道
组件可以预编译（如果可能，不知道）或在运行时编译
下面列出了一个简单的示例组件

我尝试了以下方法，都失败了：

需要组件

<template>
  <component :is="currentComp"></component>
</template>

<script>
...
methods: {
  loadComponent(path) {
    const dynComp = eval('require(path)'); // use eval to prevent webpackresolving the require
    this.currentComp = dynComp;
  }
},
...
</script>

导入有效，但行 this.currentComp = dynComp; 失败并显示错误消息：

Error in data(): "Error: An object could not be cloned."

使用提供的代码 here，但将 url 替换为本地路径

失败并显示错误消息：

Failed to resolve async component: function MyComponent() {
  return externalComponent('/path/to/Component.vue');
}
Reason: TypeError: Chaining cycle detected for promise #<Promise>

使用的示例组件如下：

// Example component
module.exports = {
  template: `
  <div>
    <input v-model="value"/>
    <button @click="clear">Clear</button>
    <div>{{ value }}</div>
  </div>`,
  name: 'Example',
  data() {
    return {
      value: '',
    };
  },
  watch: {
    value(value) {
      console.log('change!');
    },
  },
  methods: {
    clear() {
      this.value = '';
    },
  },
};

Answer 1

你或许可以看看异步加载：

https://vuejs.org/v2/guide/components-dynamic-async.html#Async-Components

并查看 webpack 延迟加载示例：

https://vuedose.tips/dynamic-imports-in-vue-js-for-better-performance/#the-meat%3A

这些只是我会根据您的要求研究的一些内容。

Answer 2

我找到了解决方案：

在单独的文件中将 vue 组件创建为 SFC（此处为 src/Component.vue）。我没试过，但可能它也适用于内联组件。
使用vue-cli-service, which is already a dev dependency, if the project is created using vue-cli预编译组件（这里使用vue-cli很好，因为已经包含了所需的加载器）：
```
yarn vue-cli-service build --target lib src/Command.vue
```
该组件在 dist 目录中编译为不同的包类型。现在可以导入文件 [filename].umd.min.js。
在运行时动态导入组件：
```
let MyComponent = eval(`require('/absolute/path/to/[filename].umd.min.js')`);
Vue.component('MyComponent', MyComponent);
```
require 包裹在 eval 中，以防止 webpack 尝试将导入包含在其包中并将 require 转换为 webpack__require。
（可选）如果 SFC 组件包含 <style>...</style> 标记，则生成的 css 将编译为单独的文件。 css 可以通过在组件项目根目录中的 vue.config.js 中添加以下行来在 js 文件中内联：
```
module.exports = {
  ...
  css: {
    extract: false,
  },
};
```

从本地文件（真正）动态加载 vue 组件

Load vue component (truly) dynamically from local file

plugins

components

vue.js

electron