从 CDN 库动态加载 vue 组件答案

【问题标题】：Load vue components from a CDN library dynamically从 CDN 库动态加载 vue 组件
【发布时间】：2019-07-31 13:01:14
【问题描述】：

我正在尝试使用 vue 动态加载外部库。在这种情况下，这些库有我想使用的 vue 组件。我目前的设置如下：

以编程方式从 CDN 加载脚本：

// The src CDN can change.
const src = 'https://cdn.jsdelivr.net/npm/vuetify/dist/vuetify.js';
const newScript = document.createElement('script');
newScript.src = src;
newScript.async = false;
newScript.type = 'text/javascript';
document.body.appendChild(newScript);

稍后在代码中，我想在组件加载完成后动态使用它：

<component :is="dynamicComponent" v-bind="componentProperties">
   <!-- More things inside -->
</component>

其中dynamicComponent 是可以更改的数据属性，设置为VBtn（也尝试过v-btn）。

但是这种方法不起作用，因为组件尚未全局注册。我收到以下错误：Unknown custom element: <VBtn>。我也试过在window.Vuetify可用后做Vue.use(window.Veutify)，问题仍然存在。

我也尝试过等待组件可用

waitFor(() => Vue.options.components[dynamicComponent]).then(...)

但是它永远不会进入then 函数。有趣的是，当我在控制台中输入 Vue.options.components['VBtn'] 时，我确实得到了组件。

我已经为此苦苦挣扎了一段时间。任何建议、文档、参考或不同的方法都将不胜感激，请注意我需要依赖动态加载库和动态加载其组件。

提前致谢。

【问题讨论】：

标签： javascript vue.js dynamic components load

【解决方案1】：

以下是使用 Vuetify 的重要步骤，顺序如下：

加载vuetify.min.css（通常在<head>）
加载 Material Icons 字体（如果需要）
加载vue.js
加载vuetify.js
初始化您的应用程序。

最重要的是：vue.js 和 vuetify.js 都需要在初始化应用程序之前加载。

<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/vuetify/dist/vuetify.min.css" rel="stylesheet">

<div id="app">
  <v-app>
    <v-content>
      <v-btn>Hello world</v-btn>
    </v-content>
  </v-app>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script type="application/javascript">
  Vue.config.devtools = false;
  Vue.config.productionTip = false;
</script>
<script src="https://cdn.jsdelivr.net/npm/vuetify/dist/vuetify.js"></script>
<script type="application/javascript">
  window.onload = new Vue({ el: '#app' });
</script>

如果你真的想要/必须动态加载你的脚本，你可以把它们包装成可以解析onload的promise。这是一个例子：

const loadScript = source => new Promise((resolve, reject) => {
  const script = document.createElement('script');
  script.src = source;
  script.type = 'text/javascript';
  script.onload = () => resolve();
  script.onerror = event => reject(`${event.target.src} failed to load. ¯\\_(ツ)_/¯`);
  document.body.appendChild(script);
});

Promise.all([
  loadScript('https://cdn.jsdelivr.net/npm/vue/dist/vue.js').then(() => {
    Vue.config.devtools = false;
    Vue.config.productionTip = false;
  }),
  loadScript('https://cdn.jsdelivr.net/npm/vuetify/dist/vuetify.js')
]).then(
  () => new Vue({ el: '#app' }), 
  error => console.log(error),
);

<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/vuetify/dist/vuetify.min.css" rel="stylesheet">

<div id="app">
  <v-app>
    <v-content>
      <v-btn>Hello world</v-btn>
    </v-content>
  </v-app>
</div>

【讨论】：

好的，所以我试了一下，还是不行，我的项目是用webpack打包文件的，所以之前加载vue.js和vuetify.js很难。 Vue实例初始化后是否可以这样做，还是我必须重组我的项目？
是什么阻止您将 Vue 和 Vuetify 添加到包中？
需要动态加载库（veutify 只是一个示例）。我希望人们能够在指定 CDN（或者它可以是 npm 包名称）时与不同的库进行交互
您可以创建 Vue 实例 programmatically 并将它们挂载到现有实例中。