Vue2通过CDN使用@vue/composition-api出现模块解析报错如何解决

报错原因 #

该报错是代码中存在import '@vue/composition-api'类的ES模块导入语句导致的。通过CDN引入的依赖会直接挂载到全局window对象，无需手动导入，删除所有针对@vue/composition-api的import语句即可解决该报错。
如果你使用了带type="module"属性的script标签编写逻辑，直接使用全局挂载的VueCompositionAPI对象即可，无需在模块内引入该依赖。

代码修正 #

你当前的HTML资源引入顺序正确，无需调整，JS逻辑中多余使用了.default属性，CDN引入的全局对象不需要该属性，修正后的代码如下：

// 注册Composition API
Vue.use(VueCompositionAPI)
// 解构需要的API
const { ref, reactive } = VueCompositionAPI

完整可运行示例 #

<!DOCTYPE html>
<html>
<head>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.6"></script>
  <script src="https://cdn.jsdelivr.net/npm/@vue/composition-api@1.2.4"></script>
</head>
<body>
  <div id="app">{{ count }}</div>
  <script>
    Vue.use(VueCompositionAPI)
    const { ref } = VueCompositionAPI

    new Vue({
      el: '#app',
      setup() {
        const count = ref(0)
        // 两秒后数值自增验证生效
        setTimeout(() => count.value++, 2000)
        return { count }
      }
    })
  </script>
</body>
</html>

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