Vue3（含Quasarjs框架）中如何将CDN资源作为ES6模块引入

你目前使用的是Vue2版本的Quasar框架，要通过CDN引入ES模块格式的magickApi.js、不依赖npm包，可以用以下两种方式实现：

方式1：组件内动态引入（单组件使用推荐） #

直接在Vue组件内通过动态import加载CDN资源，可按需加载也可预加载：

<template>
  <!-- 你的组件模板内容 -->
  <q-btn @click="processImage">执行图片处理</q-btn>
</template>

<script>
export default {
  data() {
    return {
      Magick: null // 存储加载完成的模块
    }
  },
  async mounted() {
    // 组件挂载时预加载模块，也可以在调用方法时再加载
    try {
      const magickModule = await import('https://knicknic.github.io/wasm-imagemagick/magickApi.js')
      this.Magick = magickModule
      // 预加载完成即可直接调用方法
      // this.Magick.whatever()
    } catch (e) {
      console.error('模块加载失败', e)
    }
  },
  methods: {
    async processImage() {
      // 如果没有预加载，也可以在调用时再加载
      if (!this.Magick) {
        this.Magick = await import('https://knicknic.github.io/wasm-imagemagick/magickApi.js')
      }
      this.Magick.whatever()
    }
  }
}
</script>

方式2：全局挂载（多组件复用推荐） #

如果多个组件都需要调用该模块，可以直接在项目入口index.html中引入并挂载到全局对象：

1. 修改Quasar项目的index.html文件，在<head>标签内添加如下代码：

<script type="module">
  import * as Magick from 'https://knicknic.github.io/wasm-imagemagick/magickApi.js'
  // 挂载到window全局对象，所有组件都能直接访问
  window.Magick = Magick
</script>

2. 任意Vue组件内直接调用即可，无需重复引入：

<script>
export default {
  mounted() {
    // 直接调用全局挂载的方法
    if (window.Magick) {
      window.Magick.whatever()
    }
  }
}
</script>

注意：wasm资源加载需要一定耗时，如果使用全局引入的方式，建议调用前先判断Magick是否已加载完成，避免资源未就绪时报错。

内容的提问来源于stack exchange，提问作者dan