Vue3 项目中使用setup()函数报错,script setup cannot contain ES module exports
问题
Vue3 项目中使用 setup() 函数,代码如下
<script setup> import { useStore } from "../stores/store.js"; export default { setup() { const store = useStore(); return { store, }; }, }; </script>
vite 启动时控制台报了以下错误。
[vite] Internal server error: [@vue/compiler-sfc] <script setup> cannot contain ES module exports. If you are using a previous version of <script setup>, please consult the updated RFC at https://github.com/vuejs/rfcs/pull/227.
翻译成中文的意思是,内部服务错误,:[@vue/compiler-sfc] <script setup>
不能包含 ES 模块导出。如果您正在使用 <script setup>
,请更新版本。
原因
其实问题就出在,官方文档提供了两种写法,我们把这两种写法混用了,
一种是:<script>
标签里面配置 setup
另一种是:export default
类里配置 setup()
方法
我们只需要使用一种方法即可,混用了就会报错了。
解决
我们来重写上面的例子,下面两种方法都可以,It's up to u。
第一种
<script setup> import {useStore} from "../stores/store.js"; const store = useStore(); </script>
第二种
<script> import { defineComponent } from 'vue' import {useStore} from "../stores/store.js"; export default defineComponent({ setup() { const store = useStore(); return { store, } } }) </script>
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· DeepSeek “源神”启动!「GitHub 热点速览」
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章
· 我与微信审核的“相爱相杀”看个人小程序副业
· C# 集成 DeepSeek 模型实现 AI 私有化(本地部署与 API 调用教程)
· spring官宣接入deepseek,真的太香了~