SvelteKit：如何通过别名（如 $routes）从组件和端点引用 /routes 文件夹？

Question

接下来是我的（简化的）项目结构：

appname
|
|__src
|  |__lib
|  |__routes
|
|__jsconfig.json

在 jsconfig.js 文件中，我有一个路径键，其别名为 $lib 形式的“./src/lib”文件夹。

{
    "compilerOptions": {
        "baseUrl": ".",
        "paths": {
            "$lib": ["src/lib"],
            "$lib/*": ["src/lib/*"],
        }
    },
    "include": ["src/**/*.d.ts", "src/**/*.js", "src/**/*.svelte"]
}

我想以与 $lib 相同的方式使用 $routes 别名访问路由文件夹。但是如果我在上面的 JSON 文件中添加 "$routes": ["src/routes"]，sveltekit 无法解析以开头的路径'$routes/somefile'

例子：

{
    "compilerOptions": {
        "baseUrl": ".",
        "paths": {
            "$lib": ["src/lib"],
            "$lib/*": ["src/lib/*"],
            "$routes": ["src/routes"],
            "$routes/*": ["src/routes/*"],
        }
    },
    "include": ["src/**/*.d.ts", "src/**/*.js", "src/**/*.svelte"]
}

端点.js

import { db } from '$routes/db';

我究竟做错了什么？

Answer 1

您还必须告诉捆绑程序在svelte.config.js中使用它

kit: {
  vite: {
    resolve: {
      alias: {
        $routes: path.resolve('./src/routes')
      }
    }
  } 
}

也就是说，请记住， routes 文件夹中的所有文件（以下划线开头的文件除外）都被视为路由。因此，如果您有文件，/src/routes/db.js用户可以访问http://yoursite.domain/db.

很少有任何理由从那里导入文件，如果您需要这样做，它可能不是路线或端点，而是可以安全地lib放入

更新 2023 年 1 月 31 日

上面的答案是在对 SvelteKit 中的路由工作方式进行重大修改之前编写的。如今，路由是基于目录的，只有文件+page.svelte才会真正创建路由（因此/src/routes/about/+page.svelte会给您/about路由）。这意味着您可以安全地将其他文件和组件添加到路由文件夹中。

Answer 2

2022 年 10 月：Alias的官方文档明确指出：

// @svelte.config.js

kit: {
  adapter: adapter(),
  alias: {
    '$routes': './src/routes',
    '$routes/*': './src/routes/*',
  },
}

• 无需修改tsconfig.json
• 确保npm run dev在进行更改后运行