标签: sveltekit

在 __layout 文件中，我想传递一个变量，比如 btnclicked="HR"，并且我想在 Slot 中渲染的组件中收集相同的变量？请帮忙怎么做？

问题是 - 如何在 SvelteKit 和 MongoDB 应用程序中实现 cookie 身份验证？意味着如何正确使用钩子、端点、建立数据库连接并将其显示在样板项目中。

I am using +layout.server.ts to redirect unauthenticated users from accessing authorized routes with this code:

/* +layout.server.ts */

export const load: PageServerLoad = async () => {
    // ...

    if (!isAuthenticatedUser && isAccessingAuthorizedRoute) {
        throw redirect(300, "/sign-in");
    }
}

But when I tested it by accessing an authorized url (let's say /user/profile), the browser gave me this error:

I didn't know what was the problem. After some workarounds and debugging, I found out the error was caused by server-side …

在我的SvelteKit项目中，我使用 SCSS，为了包含整个项目中使用的一些 mixins，我从 切换到vitePreprocess并svelte-preprocess在它们前面加上scss.prependData. 现在我的配置如下所示：

const config = {
  preprocess: preprocess({
    scss: {
      prependData: `@import './src/styles/prepend.scss';`,
    },
  }),
  // ..
  // Other options not relevant to the question
}

由于SvelteKit 官方文档表明这vitePreprocess 可能会更快，我想知道是否可以用它设置全局 mixin。

我尝试导入prepend.scss根+layout.svelte文件，但现在出现错误Undefined mixin。

我可以使用 mixinsvitePreprocess或者是svelte-preprocess目前实现这一目标的唯一方法吗？

我想在我的 hooks.server.ts import type { Handle } from '@sveltejs/kit'; 中读取请求的正文

export const handle = (async ({ event, resolve }) => {
  console.log(event.request.body);
 
  const response = await resolve(event);
  return response;
}) satisfies Handle;

这给了我

ReadableStream { locked: false, state: 'readable', supportsBYOB: false }

如果我读了它

const reader = request.body.getReader();
let text;
let result;
while (!(result = await reader.read()).done) {
   text += result.value;
}
console.log(text);
console.log(request.body);

然后记录正文，我得到：

ReadableStream { locked: true, state: 'closed', supportsBYOB: false }

这导致我想要执行的实际调用抛出错误

TypeError：主体在 Request.json (/home/hp/git/booking/node_modules/undici) 的 specConsumeBody (/home/hp/git/booking/node_modules/undici/lib/fetch/body.js:492:11) …

我使用 Svelte 模板中的 Vite 创建了一个 svelte 应用程序。我有一个很小的 ​​package.json，我想开始使用 Sveltekit。这是package.json

{
    "name": "jxb2",
    "private": true,
    "version": "0.0.0",
    "type": "module",
    "scripts": {
        "dev": "vite",
        "build": "vite build",
        "preview": "vite preview"
    },
    "devDependencies": {
        "@sveltejs/vite-plugin-svelte": "^2.0.2",
        "svelte": "^3.55.1",
        "vite": "^4.1.0"
    },
    "dependencies": {
        "axios": "^1.3.2"
    }
}

然而，文档没有提及任何有关进行此升级的内容。Sveltekit 谈论了如何创建项目，但没有提及从 svelte 升级。我想使用路由功能。

我可以找到有关从 sapper 迁移的页面，但我不想这样做，我想从 Svelte 到达那里

我正在使用以下技术组合：

• SvelteKit（1.5.0，使用TypeScript），以Vite（4.0.0）作为SvelteKit自带的构建工具）
• Svelte adapter-static(2.0.1) 用于发布到 GitHub Pages
• TailwindCSS与 Typography 插件
• Inter字体系列来自import '../inter.css';in+layout.svelte

运行时npm run build我收到一堆警告（为了可读性换行：

/img/logo.png referenced in D:/git/my-org/my-repo/src/app.css
  didn't resolve at build time, it will remain unchanged to be resolved at runtime

/fonts/Inter-Thin.woff2?v=3.19 referenced in D:/git/my-org/my-repo/src/inter.css
  didn't resolve at build time, it will remain unchanged to be resolved at runtime

对我个人而言，构建输出实际上有效，并且包含所有所述资源。另外，如果我删除输出文件夹并生成一个全新的构建。我没有遇到任何问题或错误。但输出对我来说就像是警告，并且“警告是来自未来的错误”！

所以，我的问题是：上面的这条消息是什么意思，我应该将其视为警告并进行更改吗？

如何重现（使用Svelte）

这是重现上述警告的一种方法：

1. npm create svelte@latest my-app，参见 …

使用时Sveltekit，端点和表单操作处理程序（+page.server.ts 和 +server.ts）存在问题，throw error何时应该return fail使用？为了fail：

return fail( status , {details} )

什么时候应该抛出错误？

throw error( status ,  message )

如果从 use:enhancement 表单调用表单操作处理程序和端点，是否会改变哪个更适合使用？两者都会被发送到 use:enhancement 表单处理程序还是错误会绕过它并直接转到 error.svelte？在文档中，我没有看到与抛出的错误相比，如何具体处理失败？

我需要不同的./routes/login页面布局...我试图忽略主./routes/__layout.svelte文件，因为我不需要侧边栏。

<script>
    import NavBar from '../components/NavBar.svelte';
</script>

<main>
    {#if segment === 'login'}
        <section>
            <slot />
        </section>
    {:else}
        <NavBar />
        <section>
            <slot />
        </section>
    {/if}
</main>

<style>
    main {
        display: flex;
        justify-content: flex-start;
    }

    section {
        padding: 2.4rem;
        width: 100%;
        background-color: #f2f6fa;
    }
</style>

我收到一个错误segment is not defined。

我有一个苗条的套件项目。我想在npm run build. 目前我有一个节点容器，我用来开始使用npm run preview. 它工作正常，但我想使用build.

我怎么能这么做呢？

参考：https://kit.svelte.dev/docs#command-line-interface-svelte-kit-build