为什么 sveltekit 在子路径中获取 favicon.png？答案

【问题标题】：Why is sveltekit fetching for favicon.png in subpath?为什么 sveltekit 在子路径中获取 favicon.png？
【发布时间】：2022-03-02 09:15:44
【问题描述】：

我有一个非常基本的 sveltekit 项目 (:3000)，它有一个使用后端的简单路由结构 (:5000)：

├── ./src
│   ├── ./src/app.html
│   ├── ./src/routes
│   │   ├── ./src/routes/index.svelte
│   │   ├── ./src/routes/__layout.svelte
│   │   └── ./src/routes/view
│   │       ├── ./src/routes/view/[id].svelte
│   │       └── ./src/routes/view/index.svelte

想象一下routes/index.svelte 中的公司列表，它预取了悬停在<a sveltekit:prefetch href="/view/${company._id}">...</a> 上的上市公司数据。

在 Chrome devtools 中，http://localhost:5000/company/6203a1d7c36d6f78f5979f26 显示它工作正常。然而由于某种原因，当我点击链接时，sveltekit 正在获取http://localhost:3000/view/favicon.png，这显然不存在，因为它位于app/src/static/favicon.png。

有人见过吗？我是否错过了关于如何处理由子路径调用的静态资产的明显要点？或者更确切地说：为什么子路径路由甚至调用根资产？

/routes/view/[id].svelte 的代码：

<script context="module" lang="ts">
    export const load = async ({ fetch, params }) => {
        const id = params.id;    
        const url = `http://localhost:5000/company/${id}`;
 
        const res: Response = await fetch(url);
        const company = await res.json();
        
        if (res.ok) {
            return { props: {company} }
        }

        return { status: res.status }
    }
</script>

<script lang="ts">
    export let company: Company;
</script>

<h1>{company.name}</h1>
...

/routes/view/index.svelte 文件应该没有问题，它可以处理简单的重定向：

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

<script>
    load();
</script>

【问题讨论】：

标签： sveltekit

【解决方案1】：

这通常是当app.html 中的代码使用favicon.png 而不是/favicon.png 时引起的，这使得 sveltekit 在其当前所在的子路径中查找网站图标。这是一个例子：


<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <!-- Make sure there is a leading slash (/) to tell it to look in the root path --> 
        <link rel="icon" href="/favicon.png" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />

        %svelte.head%
    </head>
    <body>
        <div id="svelte">%svelte.body%</div>
    </body>
</html>

这种事发生在我身上很多次了。

在较新版本的 sveltekit 中，在 app.html 中，他们已将其标准化：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <meta name="description" content="Svelte demo app" />
        <!-- Notice the %svelte.assets% -->
        <link rel="icon" href="%svelte.assets%/favicon.png" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        %svelte.head%
    </head>
    <body>
        <div>%svelte.body%</div>
    </body>
</html>

【讨论】：

不幸的是我的app.html 看起来像href="%svelte.assets%/favicon.png" 的第二个例子。
..... 不知何故，不知何故（由于 current mongoose 问题，我将 nodejs 降级到 v16.1.40）并且它可以正常工作?️

【解决方案2】：

我有同样的问题，插入 if 语句来检查 'favicon.png' 如下。

<script context="module">
    import { get } from '$lib/utils';

    export async function load({ params, session, fetch }) {
        const { id } = params;
        console.log('load params id', id);
        if (id === 'favicon.png') {
            return { redirect: '/', status: 302 };
        }
        const response = await get(`/assets/${id}`, null);
        // console.log('load response', response);

        const asset = response.success ? response.data : { name: '', category: '', member: '' };

        return {
            status: response.status,
            props: { ...{ asset, id } }
        };
    }
</script>

【讨论】：

这是个好主意 - 这是一个 hack，但至少它有效。我想知道这是否是 sveltekit 的错误？