Vue SFC Playground 如何正确引入 naive-ui
大家好，我是 展菲，目前在上市企业从事人工智能项目研发管理工作，平时热衷于分享各种编程领域的软硬技能知识以及前沿技术，包括iOS、前端、Harmony OS、Java、Python等方向。在移动端开发、鸿蒙开发、物联网、嵌入式、云原生、开源等领域有深厚造诣。
图书作者：《ESP32-C3 物联网工程开发实战》
图书作者：《SwiftUI 入门，进阶与实战》
超级个体：COC上海社区主理人
特约讲师：大学讲师，谷歌亚马逊分享嘉宾
科技博主：华为HDE/HDG
我的博客内容涵盖广泛，主要分享技术教程、Bug解决方案、开发工具使用、前沿科技资讯、产品评测与使用体验。我特别关注云服务产品评测、AI 产品对比、开发板性能测试以及技术报告，同时也会提供产品优缺点分析、横向对比，并分享技术沙龙与行业大会的参会体验。我的目标是为读者提供有深度、有实用价值的技术洞察与分析。
展菲：您的前沿技术领航员
👋 大家好，我是展菲！
📱 全网搜索“展菲”，即可纵览我在各大平台的知识足迹。
📣 公众号“Swift社区”，每周定时推送干货满满的技术长文，从新兴框架的剖析到运维实战的复盘，助您技术进阶之路畅通无阻。
💬 微信端添加好友“fzhanfei”，与我直接交流，不管是项目瓶颈的求助，还是行业趋势的探讨，随时畅所欲言。
📅 最新动态：2025 年 3 月 17 日
快来加入技术社区，一起挖掘技术的无限潜能，携手迈向数字化新征程！
文章目录
- 摘要
- 引言
- 问题复现
- 解决方案
- Demo 代码
- 代码解析
- 实际场景应用
- QA 环节
- 总结
摘要
很多小伙伴第一次在 Vue SFC Playground 里尝试引入第三方 UI 库时，经常会遇到“都有提示了，但就是不能用”的情况。一个典型例子就是 naive-ui。
在本地用 Vite + Vue3 项目时，import { NButton } from 'naive-ui' 是完全没问题的，但在 Vue 官方在线 SFC Playground 里却直接报错。为什么会这样？问题的根源在于 ESM 模块和 UMD 模块的区别。本文会详细解释问题成因，并给出一个可运行的解决方案。
引言
Vue SFC Playground 的运行机制和我们本地开发时不一样。
- 在本地（Vite/Webpack 项目里），依赖会自动走
package.json的"module"字段，加载 ESM 格式的包。 - 而在 Playground 里，依赖加载是通过 Import Maps 实现的，本质上就是浏览器
import的原生行为。
所以如果一个包只提供了 UMD 版本（常见于旧版库），或者默认入口不是 ESM，就会加载失败。
naive-ui 的问题就出在这里：默认导出的入口是个 UMD 模块，但是 Import Maps 只认 ESM，所以你会看到“模块不是 ESM”的报错。
问题复现
假设我们在 Playground 里写了这样一个组件：
<script setup>
import { NButton } from 'naive-ui'
</script><template><NButton type="primary">点我</NButton>
</template>
页面会直接报错，提示 Uncaught SyntaxError: The requested module 'naive-ui' does not provide an export named 'NButton'。
包路径：
这就是典型的 UMD 与 ESM 不兼容问题。
解决方案
核心思路：告诉 Playground 去加载 naive-ui 的 ESM 入口文件，而不是默认的 UMD 包。
我们可以在 index.html 里通过 Import Maps 指定正确的路径，常见的方式是指向 unpkg 或 jsdelivr 上的 ESM 构建版本。
Demo 代码
下面是一个可以在 Vue Playground 上直接跑的例子。关键点是 Import Maps 里要写清楚 naive-ui 的 ESM 地址。
<script type="importmap">
{"imports": {"vue": "https://unpkg.com/vue@3/dist/vue.esm-browser.js","naive-ui": "https://unpkg.com/naive-ui@2.38.2/dist/index.esm.js"}
}
</script><div id="app"></div><script type="module">
import { createApp } from 'vue'
import { NButton } from 'naive-ui'const App = {template: `<div style="padding:20px"><NButton type="primary" @click="count++">点我：{{ count }}</NButton></div>`,data() {return { count: 0 }}
}createApp(App).mount('#app')
</script>
代码解析
-
Import Maps
"vue"指向官方 ESM 版本"naive-ui"强制指向 ESM 入口：dist/index.esm.js
-
正常使用 naive-ui
通过import { NButton } from 'naive-ui'就能像在本地项目一样使用。 -
运行效果
页面渲染出一个蓝色的按钮，每次点击都会更新计数。
实际场景应用
这种问题不仅出现在 naive-ui，其实很多库都有类似情况。比如：
element-plus的 Playground 引入方式也需要指定 ESM- 一些工具库如果只有 CommonJS 版本，也会报错
所以实际使用 Vue SFC Playground 调试第三方库时，你可以有这样一套思路：
- 先去 npm 包里看看有没有
dist/index.esm.js - 如果有，就在 Import Maps 里写清楚路径
- 如果没有 ESM 构建，那基本在 Playground 里是没法直接用的（只能换本地环境）
QA 环节
Q: 为什么在本地 vite 项目里就没问题？
A: 因为 vite 会自动解析 package.json 里的 module 字段，帮你找到 ESM 版本。而 Playground 只认 Import Maps，所以你要手动指定。
Q: 我能不能直接 npm install 在 Playground 用？
A: 不行，Playground 是纯前端运行的环境，没有 npm 包管理功能，只能依赖 CDN 提供的 ESM 包。
Q: 那是不是所有库都能这么搞？
A: 不是，前提是这个库在 npm 上发布了 ESM 版本。如果只有 CommonJS/UMD，那在 Playground 里就没法用。
总结
这次的问题本质上是 ESM 与 UMD 的兼容性。
- 本地 vite 工程 → 自动解析到 ESM
- 在线 Vue SFC Playground → 必须 Import Maps 手动指定
解决的关键就是找到 naive-ui 的 ESM 构建文件，然后通过 Import Maps 映射过去。这样就能像本地一样顺利引入并使用了。