在打字稿中导入 .vue 文件

问题描述

我正在尝试使用 Typescript 设置一个 Vue3 项目。
我收到错误消息：“文件 '/home/.../src/App.vue.ts' 不是模块”。

在 main.js 中使用 Javascript 时，它工作正常，但将其重命名为 main.ts 时，我无法导入“.vue”文件。
Main.ts：

import { createApp } from 'vue';
import App from './App.vue';
import router from './router';

createApp(App).use(router).mount('#app');

现在，当运行 yarn serve 时，输出显示：

ERROR in src/main.ts:2:17
TS2306: File '/home/.../src/App.vue.ts' is not a module.
    1 | import { createApp } from 'vue';
  > 2 | import App from './App.vue';
      |                 ^^^^^^^^^^^
    3 | import router from './router';

让 Typescript 理解 .vue-files 的方法是什么？

解决方法

原来我应该在我的 App.vue 文件中添加“export default {}”。

原来的（有问题的）App.vue：

<template>
  <router-view></router-view>
</template>

<script lang="ts">
console.log('Loading App.vue');
</script>

我通过添加“export default {};”修复了错误。
新的 App.vue：

<template>
  <router-view></router-view>
</template>

<script lang="ts">
console.log('Loading App.vue');

export default {}; // <-- added this line to fix the error
</script>