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配置别名内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！