如何在SvelteKit+Vite中自定义导入基URL并兼容TS与VSCode

要解决多层相对路径的繁琐问题，你需要同时配置Vite的别名映射和TypeScript的路径解析，确保构建工具能识别别名，同时让VSCode提供正常的自动补全和智能提示，具体步骤如下：

1. 修改Vite配置（svelte.config.js） #

在SvelteKit的Vite配置中添加自定义别名，映射到你的实际目录路径：

import { sveltekit } from '@sveltejs/kit/vite';
import { defineConfig } from 'vite';

export default defineConfig({
	plugins: [sveltekit()],
	resolve: {
		alias: {
			'$src': './src',          // 映射src根目录
			'$database': './src/database'  // 映射database目录，根据你的实际路径调整
		}
	}
});

2. 配置TypeScript路径映射（tsconfig.json） #

为了让TypeScript和VSCode识别这些别名，需要在tsconfig.json的compilerOptions.paths中添加对应规则，注意要继承SvelteKit自动生成的配置：

{
	"extends": "./.svelte-kit/tsconfig.json",
	"compilerOptions": {
		"paths": {
			"$src/*": ["src/*"],
			"$database/*": ["src/database/*"]
		},
		// 保留原有其他配置
	},
	// 保留原有include、exclude等配置
}

3. 验证配置效果 #

配置完成后，重启VSCode或执行「开发者: 重新加载窗口」命令让配置生效，之后就可以用简洁的别名导入模块：

// 替代冗长的../../../../../../../../database/Gtools/GtoolsStore
import GtoolsStore from '$database/Gtools/GtoolsStore';

这样做的好处：

• 导入语句可读性大幅提升
• 重构目录结构时，只需维护别名映射，无需批量修改导入路径
• 完全兼容TypeScript类型检查，VSCode自动补全和智能提示正常工作

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