Vue3能否通过CDN使用Script Setup编写组合式API？

当然可以通过CDN使用Vue的Script Setup语法，不过需要注意几个关键细节：

• 使用Vue 3.2及以上版本的CDN链接：Script Setup是Vue 3.2版本正式引入的特性，必须确保加载的版本符合要求。
• 给<script>标签添加type="module"属性（或使用全局构建版本）：这是在CDN环境下正确使用Script Setup的前提。
• 正确声明响应式变量：你提供的示例里message:"welcome"不是有效的JavaScript语法，且在Script Setup中，要让变量在模板中响应式显示，必须使用Vue的响应式API（如ref或reactive）。

方式一：ES模块构建版本（推荐） #

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>Vue Script Setup via CDN</title>
</head>
<body>
  <div id="app">
    {{ message }}
  </div>

  <script type="module">
    import { createApp, ref } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'

    createApp({
      setup() {
        const message = ref('welcome')
        return { message }
      },
      template: `{{ message }}`
    }).mount('#app')
  </script>
</body>
</html>

方式二：全局构建版本（更贴近你的示例结构） #

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>Vue Script Setup via CDN</title>
  <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
  <div id="app">
    {{ message }}
  </div>

  <script setup>
    const { ref } = Vue
    const message = ref('welcome')
  </script>
</body>
</html>

需要注意的是，CDN场景下的Script Setup支持大部分基础组合式API功能，部分高级特性（如组件自动导入）可能需要额外处理，但日常开发的核心需求完全可以满足。

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