如何在使用适配器节点构建的非根路径上部署 sveltekit 应用程序？

Question

我创建了一个 Sveltekit 应用程序，我想将其托管在非根路径，例如 http://localhost:3000/dashboard

我的

svelte.config.js

是

import adapter from '@sveltejs/adapter-node';
import preprocess from "svelte-preprocess";

/** @type {import('@sveltejs/kit').Config} */
const config = {
    kit: {
        adapter: adapter(),
        paths: {
            base: '/dashboard',
        },
        csrf: { checkOrigin: false }
    },
    preprocess: [
        preprocess({
            scss: {
                prependData: '@use "src/variables.scss" as *;',
            },
        }),
    ],
    output: {
        globalObject: 'this',
    },
};

export default config;

我正在使用像

<img src="/images/logo_new.svg">

这样的图像

我可以使用命令构建

npm run build

要运行，我正在使用命令

node build

现在我可以在

http://localhost:3000/dashboard

上看到我的应用程序，但无法加载图像。在控制台中，我看到所有图像路径都是 404。

我的应用程序试图打开

http://localhost:3000/images/logo_new.svg

而不是

http://localhost:3000/dashboard/images/logo_new.svg

在非根路径上部署 sveltekit 应用程序的正确方法是什么？

Answer 1

如果您定义了基本路径，则在指定图像

src

或链接

href

之类的内容时也必须使用它：

import { base } from '$app/paths';

<img src="{base}/images/logo_new.svg">

另一种方法是导入图像，它还具有添加哈希的优点，这将确保图像不会缓存太久。

// whatever the path is from file, or put in sub-directory of `lib` and use `$lib/..`
import logoUrl from '../images/logo_new.svg';

<img src={logoUrl} >

对于生成的资产，应自动添加基础。