typescript - Vue+Vite 的多个默认导出错误

Question

我正在使用 Vue 并使用 Vite 和 typescript。我遇到过这个问题，我收到这个错误，上面写着“一个模块不能有多个默认的导出.ts(2528)”。

<script setup lang="ts">
import { defineCustomElements } from "@esri/calcite-components/dist/loader";
import Search from "@arcgis/core/widgets/Search";

defineCustomElements();

export default {
  mounted() {
    const search = new Search({
      container: this.$refs.search as HTMLElement,
    });
  },
};
</script>

<template>
  <div class="search-container" ref="search"></div>
</template>

<style scoped>
.search-container {
  width: 100%;
}
</style>

import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import copy from "rollup-plugin-copy";

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    copy({
      // copy over the arcgis cores assets
      targets: [
        {
          src: "node_modules/@arcgis/core/assets/",
          dest: "public/",
        },
      ],
    }),
  ],
});

如何在我的 vue 代码中正确使用导出默认值？除了适用于 vue+vite+typescript 的代码之外，一个简单的示例也对我的理解有所帮助

我还尝试使用关键字进行导出，但这也不起作用。我还尝试在 VScode 中重新启动并禁用 TypeScript 服务。这是我的 vue 代码和配置 ts 文件。

Answer 1

如果您使用<script setup> 你不需要导出它。因为它已经被vue3导出了。只需删除 export default {} 并尝试

  onMounted(() => {
    // your code here
  });

引用文档:https://vuejs.org/api/composition-api-lifecycle.html#onmounted