Vue.js TypeScript 中如何移除 `.vue` 扩展名？

在 Vue.js 的 TypeScript 中删除 .vue 扩展名的引入

问题

使用 Vue-cli3 创建一个带有 TypeScript 的项目时，在 Vue 单文件中移除 .vue 扩展名会导致导入组件时出现错误。例如，试图导入 HelloWorld.vue 会导致找不到模块的错误，尽管该组件存在。

解决方案

要从 Vue.js 的 TypeScript 中移除 .vue 扩展名，需要遵循以下步骤：

1. 修改 tsconfig.json

在 tsconfig.json 文件中，确保具有以下配置：

{
  "compilerOptions": {
    "baseUrl": "./",
    "paths": {
      "@/*": ["./src/*"]
    }
  }
}

2. 使用相对路径导入

在 .vue 文件中，使用相对路径导入组件：

<script lang="ts">
import HelloWorld from './components/HelloWorld.vue';
</script>

3. 在 TypeScript 代码中使用 .vue 扩展名

在 TypeScript 代码中，使用 .vue 扩展名导入组件：

import HelloWorld from '@/components/HelloWorld.vue';

其他提示

• 确保 tsconfig.json 文件位于项目根目录。
• 尝试重新启动 IDE 或构建工具以解决任何问题。
• 可以使用别名导入组件：

<script lang="ts">
import HelloWorld from '@/components';
</script>

总结

通过遵循这些步骤，你可以从 Vue.js 的 TypeScript 中移除 .vue 扩展名，从而简化代码并增强开发体验。

常见问题解答

1. 为什么需要删除 .vue 扩展名？

删除 .vue 扩展名可以简化代码并提高可读性，尤其是当有许多组件时。

2. 为什么使用相对路径导入？

使用相对路径可以帮助 TypeScript 解析器找到正确的文件，即使它们移动或重命名。

3. 是否可以在 TypeScript 代码中省略 .vue 扩展名？

不能。TypeScript 需要 .vue 扩展名才能识别 Vue 组件文件。

4. 如果仍然遇到错误怎么办？

检查 tsconfig.json 配置是否正确，并且组件拼写正确。也可以尝试删除 node_modules 目录并重新安装依赖项。

5. 使用别名的好处是什么？

使用别名可以缩短导入路径并提高可读性，特别是在导入多个组件时。