静态H5的Vue项目如何在单文件组件中实现动态加载依赖？

Question

单文件组件所需的依赖如何在组件被使用的时候才动态引入？

// let chart = require('../../js/echarts.min.js')
let UcMobileChartsContainer = {
  name: "UcMobileChartsContainer",
  props: {
    config: {
      type: Object,
      default: () => {},
    },
    GUID: {
      type: String,
      default: ''
    }
  },
  data() {
    return {};
  },
  template: `<div>
               <div id="charts-wrapper"></div>
             </div>`,
  // mixins: [commonMinxin],
  computed: {},
  methods: {
  },
}

上文代码中，我想开发一个echarts的单文件组件，因为项目没有用脚手架，所以组件只能以单文件组件的形式开发。这个时候就产生了一个问题，如果需要给每一个引用到该组件的页面都加上script标签引入echarts依赖显然是非常繁琐和呆板的。所以想找一种动态引入的方式，只需要将echarts组件和静态页面放入固定的路径下，引用到这个组件的时候，自动引入charts依赖。类似与Node下的require()

---

(() => {
  globalThis.document.write(`<script src="../../js/echarts.min.js"></script>`)
})()

尝试在js文件中直接wirte script标签，但是用hasOwnProperty在globalThis上查找echarts是undefined。本地源代码中发现script标签是写进去了，打印globalThis中有echarts，但是代码里直接打印globalThis.echarts是undefined，还不清楚原因

Answer 1

export default {
  // ...
  mounted() {
    if (!window.echarts) {
      const script = document.createElement('script');
      script.src = "https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js";
      script.onload = () => {
        window.echarts = true; 
        this.initializeChart();
      };
      document.head.appendChild(script);
    } else {
      this.initializeChart();
    }
  },
  methods: {
    initializeChart() {
      // 初始化 ECharts 图表
    }
  }
};