从Webpack迁移到Vite：解决路径别名与导入解析问题

方法一：使用vite-tsconfig-paths插件（推荐） #

该插件会自动读取tsconfig.json中的baseUrl和paths配置，无需手动编写别名，完美适配原有导入语句：

1. 安装依赖

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

2. 修改vite.config.ts配置

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import tsconfigPaths from 'vite-tsconfig-paths';

export default defineConfig({
  plugins: [react(), tsconfigPaths()],
  // 保留其他原有配置
});

配置完成后，Vite会严格遵循你tsconfig.json的路径规则解析导入，import { cacheOpts, typeDefs } from 'app/graphql/cache';这类语句即可正常识别。

方法二：手动配置Vite别名 #

若不想额外安装插件，可手动在vite.config.ts中配置别名，对应tsconfig.json的路径规则：

1. 先安装@types/node（避免path模块的TypeScript类型报错）

npm install --save-dev @types/node

2. 修改vite.config.ts的resolve.alias配置

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import path from 'path';

export default defineConfig({
  plugins: [react()],
  resolve: {
    alias: [
      { find: 'app', replacement: path.resolve(__dirname, 'src/app') },
      { find: 'shared', replacement: path.resolve(__dirname, 'src/shared') },
      { find: 'client', replacement: path.resolve(__dirname, 'src/client') },
      { find: 'server', replacement: path.resolve(__dirname, 'src/server') },
    ],
  },
});

这里的每个别名对应你tsconfig.json中paths的匹配规则，确保所有非相对导入都能映射到src目录下的对应文件夹。

内容的提问来源于stack exchange，提问作者meez