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

我们为了省略冗长的路径，经常喜欢配置路径别名，本文主要介绍了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配置别名内容请搜索北冥有鱼以前的文章或继续浏览下面的相关文章希望大家以后多多支持北冥有鱼！

您可能感兴趣的文章:

• java实现的顺时针/逆时针打印矩阵操作示例
• java编程题之顺时针打印矩阵
• Java顺时针打印矩阵
• Vue3+TypeScript+Vite使用require动态引入图片等静态资源
• TypeScript中import type与import的区别详析
• TypeScript顺时针打印矩阵实现实例详解