【Svelte】如何自定义路径别名（alias）？

在 SvelteKit 中，$lib是路径src/lib的别名，这就相当于绝对路径，在导入时特别方便。但是，其他路径就没有默认别名。别担心，你可以自己定义，这需要配置svelte.config.js，以下是具体操作步骤：

---

1. 更新 svelte.config.js

将别名添加到 kit.alias 属性中。你需要为此导入 path 模块。

import adapter from '@sveltejs/adapter-auto';
import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';
import path from 'path'; // <-- 添加此导入/** @type {import('@sveltejs/kit').Config} */
const config = {// 查阅 https://kit.svelte.dev/docs/integrations#preprocessors// 获取有关预处理器的更多信息preprocess: vitePreprocess(),kit: {// adapter-auto 建议输出文件以 `js` 为扩展名（可选）adapter: adapter({// 查阅 https://kit.svelte.dev/docs/adapter-auto#options 获取有关这些选项的更多信息// precompress: false,// strict: true,// out: 'build',// extensions: ['.svelte', '.js', '.ts', '.jsx', '.tsx']}),alias: {// 这会将 $src 别名映射到 src/'$src': path.resolve('./src')}}
};export default config;

注意： SvelteKit 会自动为 src/lib 添加 $lib 别名，因此通常你不需要在 kit.alias 中明确列出它，除非你想更改它的目标。

2. 如何使用：

现在你可以像这样直接从 src 目录导入文件：

假设你在 src/utils/helpers.js 有一个文件：

// src/utils/helpers.js
export function sayHello(name) {return `Hello, ${name}!`;
}

你可以像这样将其导入到组件或路由中：

<script>import { sayHello } from '$src/utils/helpers'; // <-- 使用 $src 别名let message = sayHello('SvelteKit 用户');
</script><h1>{message}</h1>

完成这些更改后，你可能需要重启 SvelteKit 开发服务器（npm run dev），以便更改完全生效。