本文介绍: 在 Vue.js 中,使用 “@” 符号作为别名引用项目中的相对路径一个常见的做法。如果你在 VSCode 中使用这种方式,但是 VSCode 不能正确识别别名,则可能是由于你的项目没有正确配置别名导致的。另外,如果你使用的是 Vue CLI 创建项目,它已经默认配置了别名,你可以vue.config.js 文件查看修改这些配置。完成配置后,你就可以在你的 Vue.js 项目使用 @ 符号作为别名来引用相对路径了。在完成配置后,VSCode 应该能够正确识别你的别名了。

问题

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

解决

尝试1

要让 VSCode 能够正确识别别名,你需要项目中的 jsconfig.jsontsconfig.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/shimsvue.d.ts

declare module '*.vue';

原文地址:https://blog.csdn.net/Peyzhang/article/details/129872396

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。

如若转载,请注明出处:http://www.7code.cn/show_7791.html

如若内容造成侵权/违法违规/事实不符,请联系代码007邮箱:suwngjj01@126.com进行投诉反馈,一经查实,立即删除

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注