这篇文章上次修改于 1030 天前,可能其部分内容已经发生变化,如有疑问可询问作者。
注意:这里使用的 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 且会报错啊!为什么呢?

找不到模块.jpg

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

{
  "compilerOptions": {
    ...

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

添加 baseUrlpaths 参数,就可以完美解决编辑器的报错提示了!

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

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