Vue+Vite+TypeScript多默认导出错误解决及正确用法示例

问题根源 #

你使用的是Vue3的<script setup lang="ts">语法糖，这个语法会自动生成组件的默认导出，但你手动又写了export default {}，导致单个模块出现两个默认导出，触发TypeScript的2528错误。

修复方案 #

删除手动编写的export default代码，改用<script setup>对应的组合式API写法实现逻辑，替代原Options API的写法。

修正后的组件代码 #

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

defineCustomElements();

// 用ref绑定DOM元素，替代Options API的this.$refs
const searchRef = ref<HTMLElement | null>(null);

// 使用组合式API的生命周期钩子onMounted
onMounted(() => {
  if (searchRef.value) {
    new Search({
      container: searchRef.value,
    });
  }
});
</script>

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

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

核心说明 #

• <script setup>是Vue3推荐的组合式API写法，编译器会自动处理组件导出，无需手动写export default。
• 用Vue提供的ref函数绑定DOM元素，替代Options API中的this.$refs。
• 用组合式API的onMounted钩子，替代Options API的mounted配置项。

Vite配置无需调整 #

你的Vite配置代码完全正常，保持原样即可：

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/",
        },
      ],
    }),
  ],
});

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