vite - vue 中 typescript 中使用@ 前缀的别名提示错误（cannot find module...）

最新推荐文章于 2025-09-10 22:34:42 发布

原创最新推荐文章于 2025-09-10 22:34:42 发布 · 3.6k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #typescript #javascript

文章介绍了如何在Vue.js项目中配置别名以解决VSCode无法识别的问题。这包括在jsconfig.json或tsconfig.json中设置别名配置，对于VueCLI项目检查vue.config.js，使用Vite时在vite.config.js中配置，以及当使用Volar扩展时如何处理格式化问题，推荐使用Prettier或ESLint作为TypeScript格式化工具。

问题

在 Vue.js 中，使用 “@” 符号作为别名来引用项目中的相对路径是一个常见的做法。如果你在 VSCode 中使用这种方式，但是 VSCode 不能正确识别别名，则可能是由于你的项目没有正确配置别名导致的。

解决

尝试1

要让 VSCode 能够正确识别别名，你需要在项目中的 jsconfig.json 或 tsconfig.json 文件中添加一个别名配置。以下是一个例子：

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

这个配置将 @ 符号映射到 src 目录，你可以根据你的项目结构和需要进行调整。

另外，如果你使用的是 Vue CLI 创建的项目，它已经默认配置了别名，你可以在 vue.config.js 文件中查看或修改这些配置。

在完成配置后，VSCode 应该能够正确识别你的别名了。

尝试2

如果你使用的是 Vite 作为构建工具，你需要在你的 Vite 配置文件 vite.config.js 中进行别名的配置。

以下是一个示例 vite.config.js 文件，展示了如何在 Vite 中配置别名：

import path from 'path';

export default {
  resolve: {
    alias: {
      '@': path.resolve(__dirname, 'src')
    }
  }
};

在这个示例中，我们使用 Node.js 的 path 模块来获取项目根目录，并将别名 @ 映射到 src 目录。
注：使用 Node.js 的 path 模块来处理文件路径,安装命令：

npm i --save-dev @types/node

你也可以在别名配置中使用其他路径别名和模式匹配，例如：

import path from 'path';

export default {
  resolve: {
    alias: {
      '@': path.resolve(__dirname, 'src'),
      '@components': path.resolve(__dirname, 'src/components'),
      '@views/*': path.resolve(__dirname, 'src/views/*')
    }
  }
};

这个示例中，我们使用了 @components 和 @views/* 两个别名，其中 @views/* 使用了通配符来匹配所有以 src/views/ 开头的文件路径。

完成配置后，你就可以在你的 Vue.js 项目中使用 @ 符号作为别名来引用相对路径了。

尝试3

如果你在 VSCode 中使用了 “Vue Language Features (Volar)” 扩展，并将它配置为代码格式化程序，但是在尝试格式化 TypeScript 文件时出现了类似于 “FormattingExtension ‘Vue Language Features (Volar)’ is configured as formatter but it cannot format ‘TypeScript’-files” 的错误信息，可能是因为该扩展本身不支持格式化 TypeScript 文件导致的。

为了解决这个问题，你可以尝试使用其他支持 TypeScript 格式化的扩展，例如 “Prettier” 或 “ESLint”。以下是如何配置 Prettier 扩展作为代码格式化程序的示例：

安装 “Prettier” 扩展。在 VSCode 中打开扩展面板，搜索 “Prettier” 并安装。

在你的项目中安装 Prettier 依赖。在终端中进入你的项目目录，并执行以下命令：

npm install --save-dev prettier

在项目根目录下创建 .prettierrc.js 配置文件，并添加以下内容：

Copy code
module.exports = {
  semi: true,
  trailingComma: "all",
  singleQuote: true,
  printWidth: 120,
  tabWidth: 2,
};

这个配置文件定义了 Prettier 的格式化规则。

在 VSCode 的设置中搜索 “Format: Default Formatter” 并选择 “Prettier”。这将使 Prettier 成为默认的代码格式化程序。

完成以上步骤后，你应该可以在 VSCode 中使用 Prettier 格式化你的 TypeScript 文件了。如果你仍然遇到问题，请检查你的 TypeScript 配置是否正确，并尝试升级或更改 “Vue Language Features (Volar)” 扩展的版本。

`如果还是报错尝试4`

在目录src中创建一个 shims 文件就足够。我的大部分组件仅使用脚本设置。
src/shims-vue.d.ts

declare module '*.vue';