标签: sveltekit

我用 sveltekit:svelte: (@sveltejs/kit": "1.0.0-next.95) 开发了一个网站。这些文章是 Markdown 编写的，所以我使用 mdsvex 作为内容。

我在 cloudflare 页面中使用适配器 vercel 和静态适配器部署了该站点。

两个脚本都运行良好，我只是想了解使用带有 vercel 适配器的无服务器功能与使用适配器 static 将站点作为静态导出运行的好处，该静态导出可以在任何地方工作（包括 vercel，即使没有具有无服务器功能的适配器） 。

我创建了一个 SvelteKit Web 应用程序，它在本地环境中的桌面上运行良好。我使用以下命令启动浏览器/网络服务器：

npm run dev -- --open

现在我刚刚部署到 Vercel。一切都运行良好，除了我用来启动 Web Worker 的 JavaScript 命令在浏览器控制台中出现 404 错误：

new Worker('./lib/game/runs_thread.js')

果然，如果我/lib/game/runs_thread.js在我的域名后面复制到浏览器中，就会收到 404 错误。我的 Worker 在哪里runs_thread.js？如何启动我的 Worker？

我想在 HTTPS 服务器上部署我的 Sveltekit 应用程序。我也有关键文件。这是我的 svelte.config.js 文件

import preprocess from 'svelte-preprocess';
import node from '@sveltejs/adapter-node';
import fs from 'fs';
import https from 'https';
/** @type {import('@sveltejs/kit').Config} **/
const config = {
    // Consult https://github.com/sveltejs/svelte-preprocess
    // for more information about preprocessors
    preprocess: preprocess(),

    kit: {
        // hydrate the <div id="svelte"> element in src/app.html
        target: '#svelte',
        adapter: node(),
        files: { assets: "static" },
        vite: {
          server: {
            https: {
              key: fs.readFileSync("path\\privkey.pem"),
              cert: fs.readFileSync("path\\cert.pem"),
            },
          },
        }
    }
};

export default config;

我应该在哪里保存用于从配置文件中读取的密钥文件？我尝试了一些，发现了一些错误，截图附后。 …

SvelteKit文档提供了如何使用参数编写 GET 端点的示例...

export async function get({ params }) { /* [...] */ }

...以及如何编写不带参数的 POST 端点...

export function post(request) { /* [...] */ }

如何编写带参数的 POST 端点？更准确地说：如果我想访问端点中的参数和请求正文，我必须使用什么函数签名？

我试图将 props 传递给 SvelteKit 端点异步函数，但没有成功。我正在使用 store 来传递value，但由于我不明白，当我尝试在函数中获取 value 时，value是未定义的。

任何人都可以看到我做错了什么，无论是访问存储值还是有更好的方法将值传递给函数？谢谢！埃里克

index.svelte

<script lang="ts">
  
  import { sampleData } from "~/data/sample";

  async function handleClick() {
    $sampleData = {value: "Fancy"};
    const result = await (await fetch(`/apis/ping`)).json();
    console.log("result", result);
  }
</script>


<button on:click={handleClick}>Ping</button>

ping.ts

import { sampleData } from "~/data/sample";
import { get as getDoc } from "svelte/store";


export async function get(): Promise<{ body: any }> {

  const _sampleData = getDoc(sampleData);
  const value = _sampleData.value;
  console.log("value", value);  

  // const …

我想使用switch caseSvelte 中的语句有条件地渲染组件，如下所示：

// index.svelte

<script>
import TextContent from './components/text-content.svelte'
import { someData } from './api/some-data.js'


    const ContentSwitch = (data) => {
        switch (data._type) {
            case 'block':
                return data.children.map((child) => ContentSwitch(child));
            case 'span':
                return (
                    <TextContent>
                        <span slot="text-content">{data.text}</span>
                    </TextContent>
                );
        }
        for (let index = 0; index < data.length; index++) {
            return data.map((item) => ContentSwitch(item));
        }
    };

</script>

<div>
    {#each someData as data}
        {ContentSwitch(data)}
    {/each}
</div>

文本内容组件：

// components/text-content.svelte

<slot name="text-content">
    <span />
</slot>

看来这种方法在 Svelte 中不起作用，因为我收到了错误Unexpected …

我正在尝试将 Chart.js 与 SvelteKit 一起使用。在开发模式下一切正常，但是当我尝试构建项目时出现以下错误。

Directory import 'C:\\directory\\node_modules\\chart.js\\auto' is not supported resolving ES modules imported from C:\\directory\\.svelte-kit\\output\\server\\app.js\n\nDid you mean to import chart.js/auto/auto.js?\n

使用精确路径导入 Chart.js 模块并不是一个好主意，只会引入更多错误。

我正在使用@sveltejs/adapter-netlify作为我的适配器svelte.config.js，但如果运行构建的预览，则会出现相同的错误。

我还添加了以下选项svelte.config.js，但无论哪种方式似乎都没有任何区别：

vite: {\n            build: {\n                rollupOptions: {\n                    // make sure to externalize deps that shouldn't be bundled\n                    // into your library\n                    external: ['chart.js/auto/auto.js'],\n                    output: {\n                        // Provide global variables to use in the UMD build\n                        // for externalized deps\n                        globals: {\n                            'chart.js/auto/auto.js': 'chart.js/auto/auto.js'\n …

我正在尝试设置 Sveltekit、Supabase 和 Vercel。它在本地环境（SvelteKit 和 Supabase）上正常工作，但是当我将其部署到 Vercel 时，Supabase 出现问题 - “错误：需要 supabaseUrl”（我在下面发布了屏幕截图）。如果我不使用 Supabase，则部署到 Vercel 没有问题。如果您遇到过类似的情况或有建议可以分享，请告诉我。

我想在 MacOs 11.5.2 上尝试 SvelteKit。使用节点 v16.13.1、npm 8.1.2。

我已经按照原始指南安装了 SvelteKit：

npm init svelte@next my-app
cd my-app
npm install
npm run dev -- --open

然后，当 localhost:3000 打开时，我收到此错误：

**Error: request.query has been replaced by request.url.searchParams**
    at Object.get (file:///Web/Svelte_30-12-21/my-app/node_modules/@sveltejs/kit/dist/ssr.js:1753:12)
    at Object.handle (/Web/Svelte_30-12-21/my-app/src/hooks.ts:10:30)
    at respond (file:///Web/Svelte_30-12-21/my-app/node_modules/@sveltejs/kit/dist/ssr.js:1764:30)
    at svelteKitMiddleware (file:///Web/Svelte_30-12-21/my-app/node_modules/@sveltejs/kit/dist/chunks/index.js:4577:28)

可能是什么问题呢？

编译时错误 - config.kit.target 不再需要，应删除

当您运行 svelteKit 应用程序时。