标签: sveltekit

我在 Svelte 中制作了一个应用程序，现在我想将其移植到 SvelteKit。我的应用程序使用window和document对象，但这些在 SSR 中不可用。首先，它抛出了ReferenceError: window is not defined，但我通过检查应用程序是否在浏览器中运行来解决这个问题。但正因为如此，我的应用程序无法运行。

我想在我的 Sveltekit 应用程序中使用环境变量 - 它在开发服务器上运行良好，但我收到此构建错误：

Error: 'PUBLIC_KEY' is not exported by $env/static/public, imported by src/routes/+layout.svelte

所以 Svelte 有这个模块可以帮助处理 env 的东西：https ://kit.svelte.dev/docs/modules#$env-static-public

我有一个简单的 .env 文件，如下所示：

PUBLIC_KEY=123

现在 IDE 会抛出与构建错误相同的类型错误，但我可以通过将其添加到我的types.d.ts文件中来修复该错误：

PUBLIC_KEY=123

现在我的 IDE 中的类型错误消失了，为了进行测试，我只需将其添加到我的 +layout.svelte 文件中：

declare module '$env/static/public' {
    export const PUBLIC_KEY: string;
}

内容 123 在开发服务器上呈现，因此它可以工作。但是，如果我运行npm run build，则会出现上面的错误。即使将一个放在@ts-ignore导入之上也没有帮助。所以我的问题是：我需要做什么才能让 TS 一起玩？

我有一个页面，其中包含从 SvelteKit 商店呈现的内容。如果商店无效，则需要将用户重定向到主页。不幸的是，即使不检查任何条件，我也找不到重定向用户的方法，所以让我们关注一个更简单的问题：如何始终从某个页面重定向到主页？

我尝试过以下方法，但这些方法都不适合我：

• 在页面中使用<script context="module">before script标签如下：

<script context="module">
    export async function load() {
        return {
            status: 302,
            redirect: "/"
        };
    }
</script>

• 在 +page.js 文件中使用 PageLoad：

/** @type {import('./$types').PageLoad} */
export function load() {
    return {
        status: 302,
        redirect: '/'
    };
}

当我使用上面提到的代码时，网站的工作方式就像没有任何更改一样，我没有收到任何错误，但重定向不会发生。如果我意外地到达该页面（在搜索栏中输入其地址，商店尚未准备好），我会被重定向到错误页面，因为发生了错误（我想通过主页重定向来防止）。如果我按预期到达该页面（商店很好），则页面会正常呈现，不会发生重定向。

A11y：具有 on:click 事件的可见非交互式元素必须伴随 on:keydown、on:keyup 或 on:keypress event.svelte (a11y-click-events-have-key-events)

这个错误是什么意思 ？我在 sveltekit 中得到的太多了。当我想添加事件侦听器时，请单击此警告显示给我。即使事件处理程序也不为空。在我的代码下面。

<div
    class="select-options max-h-0 transition-all duration-300 bg-slate-100"
    data-target="option-selection-wrapper"
    >
    {#each options as item}
        <div class="border py-1 border-dark-300 px-3 text-sm" on:click={()=> {
            selectedItem = item
        }}>
            {@html item.name}
        </div>
    {/each}
</div>

有没有可能的方法来删除这个警告。以及为什么会显示此警告。

从 sveltekit 应用程序启动骨架项目后。我的索引有一种形式：

<script>
    let name
    let password

    async function submitit(){
       // console.log("name is :", name)
       // console.log("password is :", password)
       
     const doit = async () =>{
        let res = await fetch( 'formdata' ,{
        method : "post",
        headers: {        
        'Accept': 'application/json',
        'content-type' : 'text/html; charset=UTF-8',
        //'Content-Type': 'multipart/form-data'
        },
        body : JSON.stringify({
            name : "name",
            password : "password"
        })        
    })// fetch
    let results =await res.json()
    console.log( "xxxxxxxxxxxxxxxxxxxxx"    , results )
    return results
    }       

     doit().then(data =>{
         console.log("data log : " , data) …

我有一个带有搜索字段的页面。如果使用查询参数（例如?word=cat）访问，页面应加载显示结果并填充搜索字段。如果完成搜索，结果和查询参数（浏览器历史记录）应该更新。

我发现更新查询参数的唯一方法是goto，所以我的尝试是：

<script context="module">
  export async function load({ page, fetch }) {
    const response = await fetch(`/data.json?${page.query.toString()}`)
    if (response.ok) {
      return {
        props: {
          word: page.query.get('word'),
          body: await response.json()
        }
      }
    }
  }
</script>

<script>
  import { goto } from '$app/navigation'
  import { page } from '$app/stores'

  export let word
  export let body

  function search() {
    $page.query.set('word', word)
    goto(`?${$page.query.toString()}`)
  }
</script>

<main>
  <form on:submit|preventDefault={search}>
    <input bind:value={word}>
  </form>
  <!-- ... -->
</main>

这可行，但有时会因为更新查询参数而陷入困境。由于某种原因，load在这些情况下不会被调用。我可以通过await invalidate …

我想在我的下一个项目中使用 Svelte，因为它的语法简洁并且使用起来非常愉快。不幸的是，要在我的公司部署该应用程序，我无法node在服务器上使用或类似的东西。我只能nginx以静态文件的形式提供应用程序。

苗条有可能吗？我找不到任何可以让我这样做的东西，我尝试过的所有解决方案似乎都@sveltejs/adapter-static没有正确生成以这种方式使用它。我在网上找不到任何有关如何执行此操作的指南。

我正在将 SvelteKit 用于主要是服务器端渲染页面的网站。SvelteKit 上的客户端导航工作精美且超级快捷。然而，有时，当在路由函数中调用后端服务器时load()，由于数据库长尾延迟，响应不是即时的，可能需要几秒钟的响应。

创建仅在加载时间不是即时（低于 200 毫秒）时才显示的加载指示器的最佳方法是什么？我知道通用导航模式，但我特别希望创建一个加载指示器，除非页面加载不是即时的，否则不会触发该指示器。

我通常使用以下内容重定向到任何页面，而不window.location.href在 Sveltekit 中使用

import { goto } from '$app/navigation';

const goSomeWhere = () :void => {
    goto('/')
}

但是我们如何让它返回到上一页呢？我应该使用普通 JavaScript 来返回吗？

Svelte 文档展示了如何在钩子中的局部变量上设置元素：https://kit.svelte.dev/docs/hooks#server-hooks

event.locals.user = await getUserInformation(event.cookies.get('sessionid'));

如果我尝试在 TypeScript 中扩展 locals 对象，则会收到错误，指出属性不存在。

类型“Locals”上不存在属性“user”

界面App.Locals是空的，应该是系统正常的错误信息。如何App.Locals使用用户或会话等属性扩展 Svelte 的接口，并在我的服务器路由中也提供此信息？我想避免自己到处投射或定义它。