我有一个页面（动态路由），我在其中从加载函数中的 API 获取数据。在获取数据之前显示加载指示器的正确方法是什么？我尝试过的事情：
<script context="module">
export async function load({ fetch, page }) {
let collectionId = page.params.id;
let endpoint = url;
const promise = fetch(endpoint);
return {props:{promise}};
}
</script>
然后在正常的脚本标签中
<script>
export let promise = new Promise(() => '');
promise = new Promise((resolve, reject) => {
promise.then(function (response) {
if(response.ok){
console.log('response');
response.json().then(function (json) {
console.log('data in promise');
console.log(json);
let posts = json.map((post) => new Post(post));
posts = posts.sort(function (a, b) {
return a.id - b.id;
});
resolve(posts);
}); …<script>
let count=0;
</script>
{#each list as item, i}
<div class="item">
<Item />
</div>
{/each}
如何增加 svelte 中每个块内某些条件的计数？
我刚刚开始使用 SvelteKit，我有一个关于函数的问题，该函数应该在每次路线更改时运行。我没有找到太多有用的信息。
只是为了在布局文件中运行它（我不喜欢这样做，因为我可能会使用多个布局文件并且更喜欢一个全局位置。）
在 Vue.js 中，我做了类似的事情，检查每个路由更改是否有访问令牌（在路由器文件的末尾）：
// src/router/index.ts
router.beforeEach((to, from, next) => {
AUTHENTICATION.default.fetchAccessToken();
if (to.options.protected && !AUTHENTICATION.default.tokenData) {
next("/");
} else next();
});
我如何在 SvelteKit 中实现这一目标？
这可以与SvelteKit 中的 svelte-routing 一起使用吗？ ...检查访问令牌通常是一个好主意吗？
先感谢您
我正在尝试在我的 SvelteKit 应用程序中创建一个系统，它会在某个页面上向您显示有关当前应用程序版本的信息（最好是 Git 提交哈希和描述）。我尝试使用Vite 的定义功能在构建时执行此操作，但似乎不起作用。我如何添加这样的东西？
这是我尝试做的一个例子：
svelte.config.js 中的 Vite 配置
vite: () => ({
define: {
'__APP_VERSION__': JSON.stringify('testfornow')
}
})
索引.svelte：
<script lang="ts">
const version: string = __APP_VERSION__;
</script>
<p>Current App version: {version}</p>
我需要不同的./routes/login页面布局...我试图忽略主./routes/__layout.svelte文件，因为我不需要侧边栏。
<script>
import NavBar from '../components/NavBar.svelte';
</script>
<main>
{#if segment === 'login'}
<section>
<slot />
</section>
{:else}
<NavBar />
<section>
<slot />
</section>
{/if}
</main>
<style>
main {
display: flex;
justify-content: flex-start;
}
section {
padding: 2.4rem;
width: 100%;
background-color: #f2f6fa;
}
</style>
我收到一个错误segment is not defined。
我使用NPM安装了bootstrap
在普通svelte项目中，我通常会在文件中添加引导程序和其他在项目范围内使用的包App.ts。然而，在SvelteKit项目中没有主入口点。
那么，将bootstrap 5或其他包全局添加到SvelteKit的推荐方法是什么？
我不想使用汇总插件，而只是想将其作为模块导入JavaScript
我在构建时收到错误消息。
无法访问
url.searchParams启用预渲染的页面
如何加载和使用get参数？
svelte.config.js
import adapter from '@sveltejs/adapter-static';
import preprocess from 'svelte-preprocess';
const config = {
preprocess: preprocess({
}),
kit: {
adapter: adapter({
pages: 'build',
assets: 'build',
fallback: null,
precompress: false
}),
prerender: {
default: true
},
trailingSlash: 'always'
}
};
export default config;
斯维尔特
...
import {page} from '$app/stores';
const id = $page.url.searchParams.get('id');
...
一般来说，我对 svelte 和 svelteKit 很陌生，我正在尝试从 api 加载数据，并且我遵循了 sveltekit todo 示例代码。它对于初始渲染和a标记 onClick 运行良好，但在 div 中on:click更新 url 参数 api 被调用并返回数据，但PageData对象未更新。
这里我附上了我的onClick
import { goto } from '$app/navigation';
const adhigaramClick = (adhigaram: string) => {
selectedAdhigaram = adhigaram
$page.url.searchParams.set('adhigaram',adhigaram);
goto(`?${$page.url.searchParams.toString()}`);
}
这里我附上了 api 调用 ( +page.server.ts)
export const load: PageServerLoad = async ({url, params}) => {
let selectedPaal = "test;
const paramPaal =url.searchParams.get("paal")
const adhigaram =url.searchParams.get("adhigaram")
if (paramPaal) {
selectedPaal = paramPaal;
}
const response …我正在尝试使用 svelte 打包库（您可以设置并npm create svelte@latest选择 svelte 库）创建一个 Svelte 组件包。然后，我按照 tailwind 的指南https://tailwindcss.com/docs/guides/sveltekit添加 tailwind 。
问题是，当我运行npm run build创建包时，实用程序类没有转换为 css。有趣的是，我使用 @apply 语法添加到样式标记的任何样式都会这样做。
任何人都可以帮助解释发生了什么事吗？这是预处理问题吗？我是否从根本上误解了顺风的工作原理？
有关更多详细信息，这是我为说明这一点而制作的一个小型存储库：https ://github.com/awenzel5/sveltekit-package-tailwind
它在 src/lib 文件夹中有一个组件，很简单
<h1 class="text-2xl">Hello</h1>
<h1 class="small-text">World</h1>
<style lang="postcss">
.small-text{
@apply text-sm;
}
</style>
运行 npm run build 后，这会构建为
<h1 class="text-2xl">Hello</h1>
<h1 class="small-text">World</h1>
<style>
.small-text {
font-size: 0.875rem;
line-height: 1.25rem
}
</style>
正如您所看到的，@apply 类起作用并从 tailwind 获取了 css，但是text-2xl第一个 h1 上的类却没有。
任何想法表示赞赏。
我正在尝试围绕我的 SvelteKit 应用程序构建一个 monorepo，其中该应用程序和各种 monorepo 包都是用 TypeScript 编写的。
SvelteKit 应用程序工作正常，直到我尝试从 monorepo 中将符号链接到一个特定包中。问题包取决于@redis/client（我希望它非常可靠）并且错误消息引用该模块：
ReferenceError：导出未 在 /@fs/Users/me/project/node_modules/.pnpm/@redis+client@1.5.6/node_modules/@redis/client/dist/index.js:16:23 在 instantiateModule 处定义（文件:///Users/me/project/node_modules/.pnpm/vite@4.1.4/node_modules/vite/dist/node/chunks/dep-ca21228b.js:52420:15)
如果我将 monorepo 包发布到我们的私有 github 包注册表，并从那里安装它们，它就可以正常工作...所以我认为我构建 TS 包的方式是可以的...但作为参考，这里是依赖于以下包的 package.json 的片段@redis/client：
"type": "module",
"types": "dist/index.d.ts",
"exports": {
"import": "./dist/index.js",
"require": "./dist/index.cjs"
},
以及来自同一包的 tsconfig：
{
"compilerOptions": {
"target": "es6", //also tried ES2022
"module": "commonjs", //also tried ES2022
"esModuleInterop": true,
"forceConsistentCasingInFileNames": true,
"strict": true,
"skipLibCheck": true,
"noUncheckedIndexedAccess": true,
"noEmit": true,
"moduleResolution": "node"
}
}
SvelteKit 应用程序通常包含type=module在其 package.json 中，并使用 Vite。vite …
sveltekit ×10
svelte ×7
javascript ×3
typescript ×3
vite ×3
access-token ×1
build ×1
get ×1
monorepo ×1
promise ×1
routes ×1
tailwind-css ×1