TS+VITE 设置路径别名

发表于 本文字数： 291 阅读时长 ≈ 1 分钟

# vue
# ts

之前总是会被路径之类的事情所困扰，打包之后的文件路径总是和原本的路径不一样，通过设置路径别名可以让程序在打包的时候自动将路径解析为正确的路径。

同时这种方法还支持自动补全，也就是说，使用这种方式在编写的时候，也不用去基于当前文件填写路径了。

我个人主要是使用 ts + vite 进行开发，下面是这两个语言的配置方法：

TS

在 tsconfig.json 中添加 paths 配置：

1
2
3
4
5
6
7
8
9
10
{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"],
      "@components/*": ["src/components/*"],
      "@views/*": ["src/views/*"]
    }
  }
}

这样的话，在代码中就可以使用 @/ 来代替 src/，例如：

1
2
import MyComponent from '@/components/MyComponent.vue';
import HomeView from '@/views/HomeView.vue';

Vite

在 vite.config.ts 中添加 resolve.alias 配置：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import path from 'path';

export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      "@": path.resolve(__dirname, "./src"),
      "@assets": path.resolve(__dirname, "./src/assets"),
      "@locals": path.resolve(__dirname, "./locals"),
    }
  }
});

这样在 Vite 中也可以使用 @/ 来代替 src/，例如：

1
2
import MyComponent from '@/components/MyComponent.vue';
import HomeView from '@/views/HomeView.vue';

这样配置之后，你就可以在项目中使用这些别名来简化路径引用了。

Reference