如何不使用Vue CLI，通过CDN引入Vue来使用*.vue单文件组件（SFC）？

直接通过CDN加载Vue后，无法直接在浏览器中使用.vue单文件组件（SFC）——原因很明确：浏览器本身不识别这种自定义文件格式，且CDN提供的Vue默认是运行时版本，没有内置编译.vue文件的能力。你用Vue CLI时能轻松使用，是因为CLI在构建阶段已经把.vue文件编译成了浏览器可直接解析的JS、CSS代码。

下面是几种可行的替代方案，适配不同场景：

方案一：预编译.vue文件为JS代码 #

把你的.vue代码通过Vue官方的SFC在线编译器转换成浏览器能识别的JS模块，再在HTML中引入使用：

1. 将<template>、<script>、<style>的内容粘贴到编译器，生成对应的JS代码（编译后的代码会把模板转换成渲染函数，样式也会处理成可插入的字符串）
2. 在HTML中用<script type="module">引入编译后的JS，或者直接把代码写在脚本标签里，示例如下：

// 编译后的组件代码示例
const MyComponent = {
  setup() {
    const message = Vue.ref('Hello from compiled component')
    return { message }
  },
  render: /* 编译后的渲染函数 */
}

// 注册并使用组件
Vue.createApp({
  components: { MyComponent }
}).mount('#app')

这种方法适合生产环境，因为编译工作在本地完成，不会消耗浏览器性能。

方案二：浏览器端动态编译（仅用于开发调试） #

借助能在浏览器中编译.vue文件的工具，实现动态加载和编译：

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

createApp({
  components: {
    MyComponent: Vue.defineAsyncComponent(() => loadModule('./MyComponent.vue', {
      moduleCache: { vue: Vue },
      // 自定义文件加载逻辑
      async getFile(url) {
        const res = await fetch(url)
        if (!res.ok) throw new Error(`加载文件失败：${url}`)
        return await res.text()
      },
      // 插入样式到页面
      addStyle(textContent) {
        const style = document.createElement('style')
        style.textContent = textContent
        document.head.appendChild(style)
      }
    }))
  }
}).mount('#app')
</script>

注意：这种方法会在浏览器中实时编译组件，性能开销大，仅适合快速原型开发或调试，不要用在生产环境。

方案三：手动拆分.vue内容到HTML #

把.vue文件的三部分内容拆分到HTML的对应标签中，手动模拟组件结构：

<!-- 模板部分 -->
<template id="my-component-tpl">
  <div class="my-component">
    {{ message }}
  </div>
</template>

<!-- 脚本部分 -->
<script>
const MyComponent = {
  template: '#my-component-tpl',
  data() {
    return {
      message: 'Hello from manual component'
    }
  }
}

Vue.createApp({
  components: { MyComponent }
}).mount('#app')
</script>

<!-- 样式部分（手动添加类名隔离，替代scoped） -->
<style>
.my-component {
  color: #2c3e50;
  padding: 1rem;
  border: 1px solid #eee;
}
</style>

这种方法不需要任何额外工具，适合简单组件场景，但没有自动的scoped样式隔离，需要手动通过类名控制样式作用域。

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