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 别名的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"]
}

endpoint.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 而不是

Answer 2

补充答案。

我将 SvelteKit 与 TypeScript 一起使用，因此我将路径添加到 tsconfig.json，如下所示：

{
  "extends": "./.svelte-kit/tsconfig.json",
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "$routes": ["src/routes"],
      "$routes/*": ["src/routes/*"]
    }
  }
}

然后我设置svelte.config.js如下：

import path from 'path';

/** @type {import('@sveltejs/kit').Config} */
const config = {
  kit: {
    vite:{
      resolve: {
        alias: {
          $routes: path.resolve('./src/routes'),
        }
      }
    },
  },
};

如果你也在使用Vitest，你可以设置导出对象在 config.kit.vite 下提供并将其导入您的 vite.config.ts 文件如下：

/// <reference types="vitest" />
import { defineConfig } from 'vite';
import { svelte } from '@sveltejs/vite-plugin-svelte';

import { viteConfig } from './svelte.config.js';

import type { UserConfig } from 'vite';

export default defineConfig({
  ...(viteConfig as UserConfig),
  plugins: [svelte()],
});

这样您就可以从您的 Vitest 套件中导入用于测试的路由。

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

SvelteKit: How to refer to the /routes folder from components and endpoints via alias, like $routes?

svelte

sveltekit