如何在使用adapter-node构建的非根路径上部署sveltekit应用程序?

a7qyws3x  于 2023-04-29  发布在  Node.js
关注(0)|答案(1)|浏览(127)

我已经创建了一个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应用程序的正确方法是什么?

fykwrbwg

fykwrbwg1#

如果你定义了一个基本路径,你也必须在指定像图片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} >

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

相关问题