静态H5的Vue项目如何在单文件组件中实现动态加载依赖？-灵析社区
七安前单文件组件所需的依赖如何在组件被使用的时候才动态引入？ // let chart = require('../../js/echarts.min.js') let UcMobileChartsContainer = { name: "UcMobileChartsContainer", props: { config: { type: Object, default: () => {}, }, GUID: { type: String, default: '' } }, data() { return {}; }, template: ` `, // mixins: [commonMinxin], computed: {}, methods: { }, } 上文代码中，我想开发一个echarts的单文件组件，因为项目没有用脚手架，所以组件只能以单文件组件的形式开发。这个时候就产生了一个问题，如果需要给每一个引用到该组件的页面都加上script标签引入echarts依赖显然是非常繁琐和呆板的。所以想找一种动态引入的方式，只需要将echarts组件和静态页面放入固定的路径下，引用到这个组件的时候，自动引入charts依赖。类似与Node下的require() * * * (() => { globalThis.document.write(``) })() 尝试在js文件中直接wirte script标签，但是用hasOwnProperty在globalThis上查找echarts是undefined。本地源代码中发现script标签是写进去了，打印globalThis中有echarts，但是代码里直接打印globalThis.echarts是undefined，还不清楚原因
JayCoderexport 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 图表
}
}
};