Vue3 使用setup 报错解决方案 <script setup> cannot contain ES module exports.

问题来源

笔者在开发vue3项目时遇到一个很奇怪的报错，“script setup” 无法包含ESmodeule,报错如下：

[@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.

排查

原来vue3关于setup语法糖现在有两种写法： 1、直接写在defineComponent组件里面，这时候不能写到《script setup》script标签里面。

<script lang="ts">
import HelloWorld from './components/HelloWorld.vue'
import UserPinia from './components/UserPinia.vue'
import { defineComponent, defineAsyncComponent, reactive, onMounted } from "vue";

export default defineComponent({
  name: "App",
  components: {
    "nav": defineAsyncComponent(() => import("./components/Nav.vue")),
  },
  setup(props, context) {
  },
})
</script>

<template>
  <div class="container">
    <nav />
    <div class="layout">
      <RouterView/>
    </div>
  </div>
   
</template>

2、直接写在<script>标签里面， <script setup lang="ts">

<script setup lang="ts">
import HelloWorld from './components/HelloWorld.vue'
import UserPinia from './components/UserPinia.vue'
import Nav from './components/Nav.vue'
import { ref, onMounted } from "vue";

let num = ref<any>(0);
const change = () => {
  num = 2;
}
onMounted(() => {
  change();
})
</script>

<template>
  <div class="container">
    <Nav />
    <div class="layout">
      <RouterView/>
    </div>
    {{num}}
  </div>
   
</template>