Vue.js 在Vue中使用作为CDN导入的ApexCharts

我正在尝试在我的vue项目中使用vue apexcharts，并且我正在尝试通过脚本标记导入库，以便在构建我的应用程序时减小捆绑包的大小

我的代码如下所示：

import Vue from "vue";

const loadScript = (src) =>
  new Promise((resolve, reject) => {
    const script = document.createElement("script");
    script.setAttribute("src", src);
    script.onload = resolve;
    script.onerror = reject;
    document.head.appendChild(script);
  });

const loadApexCharts = () =>
  loadScript("https://cdn.jsdelivr.net/npm/apexcharts");
const loadVueApexCharts = () =>
  loadScript("https://cdn.jsdelivr.net/npm/vue-apexcharts");

const initVue = () => {
  Vue.component("apexcharts", window.VueApexCharts);
  new Vue({
    data: {},
    components: {},
    created() {
      console.log(window.VueApexCharts, 'log')
    },
  });
};

loadApexCharts()
  .then(loadVueApexCharts)
  .then(initVue)
  .catch((err) => console.warn(err));

从“Vue”导入Vue

一旦我添加了脚本标记，我不知道如何注册apexcharts并在组件中使用它。通常我会在全局窗口中找到库引用，但在那里找不到任何内容

提前谢谢

编辑 我正在努力实现这样的目标：

import Vue from "vue";

const loadScript = (src) =>
  new Promise((resolve, reject) => {
    const script = document.createElement("script");
    script.setAttribute("src", src);
    script.onload = resolve;
    script.onerror = reject;
    document.head.appendChild(script);
  });

const loadApexCharts = () =>
  loadScript("https://cdn.jsdelivr.net/npm/apexcharts");
const loadVueApexCharts = () =>
  loadScript("https://cdn.jsdelivr.net/npm/vue-apexcharts");

const initVue = () => {
  Vue.component("apexcharts", window.VueApexCharts);
  new Vue({
    data: {},
    components: {},
    created() {
      console.log(window.VueApexCharts, 'log')
    },
  });
};

loadApexCharts()
  .then(loadVueApexCharts)
  .then(initVue)
  .catch((err) => console.warn(err));

---

但是我的日志在这种情况下返回undefined（未定义）

在VueAppCharts之前需要加载ApexCharts，因此您必须使用

Promise

s确保脚本加载顺序。CDN脚本分别定义了

window.ApexCharts

和

window.vueAppCharts

，因此加载脚本后，您可以注册

ApexCharts

组件以在应用程序中使用：

//main.js
const loadScript=src=>newpromise（（解析、拒绝）=>{
常量脚本=document.createElement（'script'）
script.setAttribute（'src'，src）
script.onload=解析
script.onerror=拒绝
document.head.appendChild（脚本）
})
常量loadApexCharts=（）=>loadScript（'https://cdn.jsdelivr.net/npm/apexcharts')
常量loadVueAppExCharts=（）=>loadScript（'https://cdn.jsdelivr.net/npm/vue-apexcharts')
常量initVue=（）=>{
组件（'apexcharts'，window.vueAppExcharts）
新Vue({
渲染：（h）=>h（应用程序）
}).$mount（“#应用程序”）
}
loadApexCharts（）
.然后（加载VueAppExCharts）
.然后（初始化Vue）
.catch（（错误）=>console.warn（错误））

---

这实际上是一个新问题。我建议发布一个新问题，这样就不会让这里的水变得浑浊。