echarts - 静态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 图表    }  }};