路径别名

我们可以使用路径别名来代替麻烦的相对路径导入

- import { Counter } from '../../../../components/Counter'
+ import { Counter } from `#root/components/Counter`

其中 #root/ 表示我们项目的根目录

我们可能需要在最多三个不同的地方定义路径别名：

• vite.config.js#resolve.alias （用于 Vite 处理过的文件）
• package.json#imports （用于 Vite 未处理的 Node.js 文件）
• tsconfig.json#compilerOptions.paths （用于 Typescript 文件）

Example:

• /examples/path-aliases

Vite

// vite.config.js

export default {
  resolve: {
    alias: {
      "#root": __dirname,
    },
  },
};

仅适用于经过 Vite 处理过的文件； 我们的一些 Node.js 服务文件可能无法被 Vite 处理； 参考下面的 Node.js section

Vite 文档： vitejs.dev/config/#resolve-alias

Example: /examples/path-aliases/vite.config.ts

Node.js

// package.json

{
  "imports": {
    "#root/*": "./*.js" // 或 `./*.ts`
  }
}

Node.js 文档： nodejs.org/api/packages.html#subpath-patterns

Example: /examples/path-aliases/package.json

Vite 的 vite.config.js#resolve.alias 只适用于 Vite 处理过的文件。（以下所有文件及其导入： *.page.js, *.page.server.js,*.page.client.js, *.page.route.js）

浏览器端文件始终会被 Vite 处理，但是 Node.js 服务器文件并不一定，例如 Express.js server code

对于这些文件，我们可以使用 Node.js 的内置支持 package.json#imports 或使用如 module-alias 的 npm 包。（使用 module-alias 的示例：/examples/path-aliases (@c914dad).）

TypeScript

// tsconfig.json

{
  "compilerOptions": {
    "paths": {
      "#root/*": ["./*"]
    }
  }
}

如果我们使用 Typescript，那么 Typescript 需要知道我们的路径别名

Typescript 文档：typescriptlang.org/tsconfig#paths

Example: /examples/path-aliases/tsconfig.json