最近又在写一些前端代码，已经受够了导入路径长这样

../../foo/bar/etc

太糟糕了！一旦目录结构有改动，就很容易出问题。这可不行！

网上建议在我的 tsconfig.json 中添加以下配置

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

这样编辑器里的波浪线提示倒是消失了，但构建依然失败。顺带一提，我这里用的是 Tauri 和 Vite。

原来问题出在 Vite 上。要让这些别名生效，还需要在 vite.config.ts 中添加一些配置

首先，安装一个插件

npm install --save-dev vite-tsconfig-paths

然后，将它添加到配置中

import tsconfigPaths from "vite-tsconfig-paths";

export default defineConfig(async () => ({
  plugins: [tsconfigPaths()], // I imagine you have other plugins

  // you probably have a bunch more here too
}));

搞定！现在的导入路径清爽多了