vue3 + vite + ts 设置 @ 路径别名

由于 vite 创建项目后，tsconfig.json 已配置好对应别名，因此只需单独配置 vite.config.ts 即可。

目前 tsconfig.json 中应已有如下代码

   "paths": {
      "@/*": ["src/*"],
      "@helpers/*": ["./src/helpers/*"],
      "@services/*": ["./src/services/*"],
      "@vueUtils/*": ["./src/vueUtils/*"],
      "@layouts/*": ["./src/layouts/*"],
      "@components/*": ["./src/components/*"],
      "@views/*": ["./src/views/*"],
      "@assets/*": ["./src/assets/*"],
      "@mixins/*": ["./src/mixins/*"],
      "@store/*": ["./src/store/*"]
    }

一、安装 path 和 @types/node

pnpm install path --save

pnpm install @types/node --save-dev

二、打开 vite.config.ts 引入如下代码

......

import path from "path";

......

export default defineConfig({
  plugins: [
   ......
  ],

  resolve: {
    // 配置路径别名
    alias: {
      "@": path.resolve(__dirname, "./src"),
      "@components": path.resolve(__dirname, "./src/components"),
    },
  },

});

Tips1：vite.config.ts 中的别名需与 tsconfig.json 中的别名一致；

Tips2：想要配置什么别名便在两个文件中同步加上即可，如文代码段中 vite.config.ts 暂时只配置了 src 和 components 文件路径别名。