NodeJS 无法使用安装了bootstrape的@sveltejs/adapter-static生成静态站点

q1qsirdb 于 2023-04-29 发布在 Node.js

关注(0)|答案(1)|浏览(133)

我使用npm create svelte@latest my-app创建了sveltekit应用程序
然后，我安装bootstrap使用npm install bootstrap和导入引导css和js在根布局，如
src/routes/+layout.svelte含量

<script>
    import 'bootstrap/dist/css/bootstrap.min.css';
    import 'bootstrap/dist/js/bootstrap.min.js';
    import Header from './Header.svelte';
    import './styles.css';
</script>

<div class="app">
    <Header />

    <main>
        <slot />
    </main>

    <footer>
        <p>visit <a href="https://kit.svelte.dev">kit.svelte.dev</a> to learn SvelteKit</p>
    </footer>
</div>

<style>
</style>

svelte.config.js的含量

import adapter from '@sveltejs/adapter-static';

export default {
    kit: {
        adapter: adapter({
            // default options are shown. On some platforms
            // these options are set automatically — see below
            pages: 'build',
            assets: 'build',
            fallback: null,
            precompress: false,
            strict: true
        })
    }
};

npm run dev工作正常
但是npm run build给我错误

ReferenceError: document is not defined
    at K (/home/alok/Alok/myapp/node_modules/bootstrap/dist/js/bootstrap.min.js:6:8846)
    at /home/alok/Alok/myapp/node_modules/bootstrap/dist/js/bootstrap.min.js:6:9655
    at /home/alok/Alok/myapp/node_modules/bootstrap/dist/js/bootstrap.min.js:6:84
    at Object.<anonymous> (/home/alok/Alok/myapp/node_modules/bootstrap/dist/js/bootstrap.min.js:6:256)
    at Module._compile (node:internal/modules/cjs/loader:1159:14)
    at Module._extensions..js (node:internal/modules/cjs/loader:1213:10)
    at Module.load (node:internal/modules/cjs/loader:1037:32)
    at Module._load (node:internal/modules/cjs/loader:878:12)
    at ModuleWrap.<anonymous> (node:internal/modules/esm/translators:169:29)
    at ModuleJob.run (node:internal/modules/esm/module_job:193:25)

Node.js v18.12.1
[vite-plugin-sveltekit-compile] Failed with code 1
error during build:
Error: Failed with code 1
    at ChildProcess.<anonymous> (file:///home/alok/Alok/myapp/node_modules/@sveltejs/kit/src/utils/fork.js:67:13)
    at ChildProcess.emit (node:events:513:28)
    at ChildProcess._handle.onexit (node:internal/child_process:291:12)

我添加bootstrap的方法错了吗？我怎样才能建立这个项目来生成静态站点？

node.js

来源：https://stackoverflow.com/questions/75273176/not-able-to-generate-static-site-using-sveltejs-adapter-static-with-bootstrape

1条答案

按热度按时间

s4n0splo1#

文档未在服务器端级别定义，因此不能这样做。你可以做的是在一个组件中使用方法导入所有文档，然后在你的层中导入该组件，如下所示：

<script>
...
let Slider;
onMount(async () => {
    const module = await import('./components/Slider.svelte');
    Slider = module.default;
});
...

<svelte:component this={Slider}/>

假设我的Slider.svelte组件内部有bootstrap导入。这样，您只在onMount内部导入文档相关组件，完全跳过了服务器端，没有任何错误。

赞(0）回复(0）举报 2023-04-29

我来回答

NodeJS 无法使用安装了bootstrape的@sveltejs/adapter-static生成静态站点

1条答案

相关问题

热门标签

最新问答