typescript+vite项目配置别名的方法实现

我们为了省略冗长的路径，经常喜欢配置路径别名。但是在typescript下会遇到一些坑，比如导入路径不能以“.ts”扩展名结束，路径不识别等。下面我记录了我的处理方法。

vite.config.js：

export default defineConfig({
  resolve: {
    alias: {
      '@': path.resolve(__dirname, 'src') // 配置别名
    }
  }
})

配置完之后，就可以在ide中使用别名了。但是这个时候我发现，路径下面报错了，hover上去后提示的错误是：导入路径不能以“.ts”扩展名结束。

既然不允许用扩展名，那么我省略扩展名好了。

export default defineConfig({
  resolve: {
    alias: {
      '@': path.resolve(__dirname, 'src')
    },
    extensions: ['.mjs', '.js', '.ts', '.jsx', '.tsx', '.json']
  }
})

这样，扩展名就不需要写了。

但是，项目无法运行了，报错显示：找不到这个文件。

那就是编译出问题了，于是我调整了 tsconfig.json，添加如下配置：

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"] // 相对位置需要配置baseUrl才能识别，否则会报错
    }
  }
}

注: vite 和 vite2版本配置不一致

如果项目是vite版的 需要将最外层的resolve给取消掉 (重启项目即可配置成功)

export default {
    alias: {
            '/@/': resolve(__dirname, 'src'),
    },
}

到此这篇关于typescript+vite项目配置别名的方法实现的文章就介绍到这了,更多相关typescript vite配置别名内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • Typescript中使用引用路径别名报错的解决方法

    Typescript中使用引用路径别名报错的解决方法

    在TS中引用路径别名提示找不到模块或者相应的声明 1.ts中使用路径别名报错 在react中通常路径别名都是在webpack的webpack.config.js文件中配置的,但是在引入了ts之后,webpack中的路径别名引用失效了此时我们需要在跟src文件同级目录的tsconfig.json文件中添加配置: 注意要在compilerOptions中添加(webpack中的路径也需要配置) "compilerOptions": { "target": "e

  • typescript在node.js下使用别名(paths)无效的问题详解

    typescript在node.js下使用别名(paths)无效的问题详解

    目录 背景 typescript不会对别名进行处理 另一个坑 调试tsconfig-paths 总结 背景 纯nodejs环境,直接使用tsc编译nodejs.源码目录是src,编译输出目录为bin.代码结构如下: src utils a.ts b.ts config … bin tsconfig.json 在其他深层次目录引用utils或者config下的文件时,总是要写一长串的'../../../../',还需要数数.这显然是不能接受的.用过webpack开发的小伙伴们,想想别名功能,typ

  • typescript路径别名问题详解与前世今生的故事

    typescript路径别名问题详解与前世今生的故事

    目录 前言 开始探索 ts-node-dev 使用路径别名 关于路径别名的打包问题 tsc 为什么不会转换路径别名? tsc 不转换路径别名的根本原因 总结 参考 前言 最近在 typescript 项目上踩了不少坑,打算写几篇文章记录一下. 本篇文章就来梳理一下 ts 的相关技术栈 tsc.ts-node.ts-node-dev 中的路径别名问题,从开发到打包阶,不仅告诉你坑在哪,怎么解决,还会还会告诉你为什么会有这个坑以及坑背后的故事. 开始探索 本篇文章会以一个空项目开始,由浅入深的告诉你

  • typescript+vite项目配置别名的方法实现

    我们为了省略冗长的路径,经常喜欢配置路径别名.但是在typescript下会遇到一些坑,比如导入路径不能以“.ts”扩展名结束,路径不识别等.下面我记录了我的处理方法. vite.config.js: export default defineConfig({   resolve: {     alias: {       '@': path.resolve(__dirname, 'src') // 配置别名     }   } }) 配置完之后,就可以在ide中使用别名了.但是这个时候我发现,

  • Eclipse开发JavaWeb项目配置Tomcat的方法步骤

    Eclipse开发JavaWeb项目配置Tomcat的方法步骤

    以下都经过本人自学时一一自己动手配置实验. 首先介绍eclipse开发JavaWeb项目需要配置的相关环境,使用tomcat软件在本地搭建服务器,然后再在eclipse环境下配置tomcat: 第一步:使用tomcat软件在本地搭建服务器 这个本地的tomcat服务器与eclipse环境下配置tomcat服务器都可以使用,但是只能启动一个,否则会报端口冲突,到时安装好环境会介绍 tomcat软件是apache旗下的一个开源项目.软件下载链接:http://tomcat.apache.org/,如

  • Android Studio多工程引用同一个library项目配置的解决方法

    在使用Android Studio开发的时候,如遇到多个项目引用同一个library的情况时,会遇到在每个项目中都要有一套library的代码的情况,对于还在开发和维护中的Library需要频繁的修改,这对同步就很麻烦,为了解决这个问题,出现了下面的解决方案. 首先:新建一个类库工程,工程名为AppLibs.Dev. 在该类库中包含一个公共的类库appLibs的Module,Module下面的build.gradle配置如下: /** 声明是Android类库 */ apply plugin:

  • Linux系统 为命令配置别名的方法

    什么是别名 在管理和维护Linux系统的过程中,将会使用到大量命令,有一些很长的命令或用法经常被用到,重复而频繁的输入某个很长命令或用法是不可取的.这时可以使用 别名 功能将这个过程简单化. Linux系统下 有的命令 如 rm cp mv 等  这些命令是删除 移动之类的 使用时要谨慎  也可以通过设置 别名 来进行变相的一些的提醒 简单来说 1.使用危险的命令前给予警告 cp rm mv 2.复杂命令使用更加方便 问题:为rm配置别名 do not use rm即运行rm命令的时候  系统提

  • 详解MyBatis配置typeAliases的方法

    0x00:前言参考 之前的<MyBatis 中 SqlMapConfig 配置文件详解>记了一下 MyBatis 中的核心配置文件各个标签的作用和使用场景,这篇文章细说一下配置文件中 typeAliases 标签的详细使用. 0x01:标签介绍 在 MyBatis 的 sql 映射配置文件中,需要使用 paramterType.resultType 来设置 sql 语句的输入输出参数,一般参数都是基本的数据类型或封装类型,但都需要声明该类型的全路径,java.lang.String,或者 cn

  • vite项目添加eslint prettier及husky方法实例

    vite项目添加eslint prettier及husky方法实例

    目录 1. 初始化vite项目 2. 添加eslint 3. 添加 prettier 4. 添加 husky和lint-staged 5. 配置commitlint 1. 初始化vite项目 npm init vite Project name: - vite-project // 项目名称,默认 vite-project Select a framework: › react // 选择框架 Select a variant: › react-ts // 选择组合 2. 添加eslint 安装

  • Vue3+Vite项目按需自动导入配置以及一些常见问题修复

    目录 一.Vue API自动导入 1.1 配置unplugin-auto-import 1.2 可能遇到ts,eslint不识别而导入报错的问题 1.3 配置src/component目录下的组件自动引入 二.按需引入UI组件库(antd,element-plus) 2.1.按需引入element-plus 2.2 ant-design-vue 按需引入 2.3 自动导入 Element Plus Icon 三.关于配置文件 总结 一.Vue API自动导入 解决的问题:避免在每个vue组件中都

  • react脚手架配置路径别名的方法

    文章写时react版本16.13.1 1输入命令 npm run eject 在项目根目录下生成config目录 2在confilg下打开webpack.config.js文件找到如下位置 alias: { // Support React Native Web // https://www.smashingmagazine.com/2016/08/a-glimpse-into-the-future-with-react-native-for-web/ 'react-native': 'reac

  • Tomcat 中如何给 web 项目配置虚拟目录的方法

     为什么要给 web 项目配置虚拟目录? 初学 JavaWeb 时,会发现只要我们把 web 项目放到 Tomcat 的 webapps 目录下,再通过 http://localhost:8080/项目名称/某个页面 就可以访问该网站了.可是这样并不符合规范,最好还是把 web 项目文件和 Tomcat 的安装文件分开.那如何实现这个要求呢?当然是给 web 项目配置虚拟目录啦. 如何给 web 项目配置虚拟目录? 前面已经说了,我们要把项目文件和 Tomcat 安装文件分离开.假设我们这里把

  • vue-cli创建的项目,配置多页面的实现方法

    vue官方提供的命令行工具vue-cli,能够快速搭建单页应用.默认一个页面入口index.html,那么,如果我们需要多页面该如何配置,实际上也不复杂 假设要新建的页面是rule,以下以rule为例 创建新的html页面 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=d

随机推荐