Vite + TypeScript 模块引入别名配置

Vite + TypeScript 模块引入别名配置

注意：这里使用的 Vite 版本为 ^2.3.4，实际安装 2.3.5。如果你使用的版本比它低，也许并不可以完全适用！

这段时间不是用 Vite 新开了个项目嘛 🐎，而此前写 Vue 最习惯的就是带前缀 @ 的方式引入模块了，相比之下默认的 ../../ 引入方式就显得非常智障，为什么不能像此前用 @ 代表项目根目录呢？于是，今天就以此做了一次详细的探索...

打开 Vite 项目里面的 vite.config.ts 文件，参考下面 resolve 对象的写法。

import { defineConfig } from 'vite'
import reactRefresh from '@vitejs/plugin-react-refresh'

const { resolve } = require('path')

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    reactRefresh()
  ],
  resolve: {
    alias: [
      {
        find: "@",
        replacement: resolve(__dirname, 'src')
      }
    ]
  }

})

使用 yarn dev 重启服务，就可以使用 @/components/Layouts/Header 的方式定位到项目的 /src/components/Layouts/Header 组件了。

确实可以使用了，但还有个问题，我的项目是 TypeScript 啊！使用 @ 引入，开发模式下是正常了，但是不能 Build 且会报错啊！为什么呢？

其实是需要修改 tsconfig.json 文件，纠正下路径才可以。

{
  "compilerOptions": {
    ...

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

添加 baseUrl 和 paths 参数，就可以完美解决编辑器的报错提示了！

相对应的项目架构大概是这样的：

src
  components
  pages
  utils
tsconfig.json
vite.config.ts

遇到问题的第一步首先就是看文档，Vite 文档的描述是此处配置指向 @rollup/plugin-alias 的 entries 配置项。

Will be passed to @rollup/plugin-alias as its entries option. Can either be an object, or an array of { find, replacement } pairs.

于是照着 RollUp 的说明葫芦画瓢，改了下 find 标识，就成了。

然而这只是第一步 ☝️，第二部就是我遇到的 TS 报错问题了，G00gle 了以下终于得到了答案，可以得出结论，大多数此类问题都应该是 tsconfig.json 的设置问题，涨姿势了。

Vite 文档 - resolve-alias
@rollup/plugin-alias
using it with rollup-plugin-alias - GitHub Issues
Say Goodbye to ‘../../../..’ in your TypeScript Imports

• 上一篇: TS 乏型对象数组的多个定义方式
• 下一篇: 看完啦 (つд⊂)