标签: sveltekit
如何使用 sveltekit 和 pnpm 设置turborepo
我正在尝试将 Turborepo 添加到我的 Svelte 应用程序中，但看起来npx create-turbo@latest命令和示例目前仅支持 NextJs。如何配置它以运行 Svelte 和 Sveltekit 应用程序？
推荐指数
解决办法
查看次数
如何在 svelte-kit 应用程序中从 node_modules 加载 pico css？
安装有$ npm install @picocss/pico -D
在 rollup.config.js 中：
import css from "rollup-plugin-css-only";
...
plugins: [
css({ output: "static/bundle.css" }),
],
在 ./routes/__layout.svelte 我有：
<script>
import "../../node_modules/@picocss/pico/css/pico.min.css";
</script>
只是在 UI 中出现错误，并且不存在 css /bundle.css 。
推荐指数
解决办法
查看次数
如何使相对 Href 在 SvelteKit 中工作？
我想使用 SvelteKit 构建一个 Web 应用程序，其中一页列出所有项目（带有潜在的搜索查询参数），然后一页列出每个单独的项目。如果我必须用后端生成的所有内容以老式方式构建它，我的路径将是/items/所有项目的列表以及/items/123item123等。也就是说，要转到 item 的页面123，链接将带有href="123"will无论您当前处于索引 ( /items/) 还是某一特定项目的页面 ( /items/[id])，都可以工作。
使用 SvelteKit，如果我创建文件routes/items/index.svelte和routes/items/[id].svelte，那么routes/items/index.svelte将有路径/items，没有尾部斜杠，因此 的链接href="123"将导致/123，导致“未找到”错误。
但是，该链接可以在单个项目的页面上使用，例如/items/456。
这与传统 HTML 模型中的情况截然不同，在传统 HTML 模型中，来自/items/(或/items/index.html) 的链接与来自 的链接的工作方式相同/items/[id].html。
现在，您可以设置svelte.config.js一个选项，使其对应于 path ，但随后有了 path ，我们又遇到了同样的问题：一个值无法同时在索引和单个项目的页面中工作。trailingSlashalwaysroutes/items/index.svelte/items/routes/items/[id].svelte/items/[id]/href
我现在看到的唯一方法是使用绝对路径，但它不是很可组合。我的猜测是我做错了什么。
推荐指数
解决办法
查看次数
SvelteKit - 部署 - @sveltejs/adapter-static 不更新后备页面中的静态路径
我是第一次探索 SvelteKit，我构建了我的第一个简单应用程序，我想将其作为静态页面部署到我的 Apache 服务器
据我了解适配器静态是可行的方法，所以我安装了它并将我的svelte.config.js文件更改为：
import preprocess from 'svelte-preprocess';
import adapter from '@sveltejs/adapter-static';
/** @type {import('@sveltejs/kit').Config} */
const config = {
preprocess: preprocess(),
kit: {
adapter: adapter({
paths: { base: "/PERSONAL_PATH" },
fallback: 'index.html',
precompress: false,
})
}
};
export default config;现在：
运行npm run build没有任何错误，问题是当我检查index.html页面的所有依赖项（或者样式表和 JS 文件的 URL，如果你愿意的话......）时，有两个问题，如下所示：
- 具有绝对路径，这使得无法将页面源移动到任何其他位置
- 不在
PERSONAL_PATH我希望的文件夹中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="description" content="" />
<link rel="icon" href="./favicon.png" />
<meta …推荐指数
解决办法
查看次数
如何在 WebStorm（和 PhpStorm 等）中启用对 SvelteKit 的 $lib 别名的支持？
是否可以定义一个特殊的映射，使 PhpStorm（或其他基于 WebStorm 的 IDE）能够查找位于 SvelteKit 的特殊$lib目录别名中的文件？
例如，在 PhpStorm 中，我导入全局样式，如下所示：
<script context="module">
import '$lib/global-styles.scss';
</script>
然而，不幸的是，当尝试导航到该特定文件时，IDE 会显示“无法找到要转到的声明”：
推荐指数
解决办法
查看次数
刷新 SvelteKit 中的当前页面
有没有办法使用 SvelteKit 每 10 秒刷新一次页面？我必须刷新页面才能从端点获取输出。
src/routes/[id].svelte从加载数据src/routes/[id].ts。
推荐指数
解决办法
查看次数
如何处理重置布局？
我现在收到此错误：
__layout.reset 已被删除，以支持命名布局：https ://kit.svelte.dev/docs/layouts#named-layouts
我有一个子目录，我不想继承其基本布局。
$ find . -name '*layout*'
./setup-profile/__layout.reset.svelte
./auth/__layout.reset.svelte
./__layout.svelte
package.json 有
"@sveltejs/kit": "next",
推荐指数
解决办法
查看次数
sveltekit ssr 中的“load”函数连接被拒绝
我正在尝试将loadsveltekit 中的函数与 ssr 一起使用。
由于某种原因，我连接被拒绝：
<script context="module">
import Jobs from '$api/jobs';
export async function load({ fetch }) {
const jobs = await new Jobs(fetch).getAll();
console.log(jobs);
return {
props: {
jobs
}
};
}
</script>
工作.js
import Api from './create-api';
class Jobs extends Api {
constructor(fetch) {
super(fetch);
}
async getAll() {
return await this.api('/jobs');
}
async getByTag(tag) {
return await this.api('/jobs/tags/' + tag);
}
async getByUsername(username) {
return await this.api('/jobs/users/' + username.toLowerCase());
}
async getAllMine() {
return await …推荐指数
解决办法
查看次数
从 __layout.svelte 访问当前页面名称
我在一个目录中有一堆路由，有一个公共__layout.svelte文件，假设有以下结构：
- src
- routes
- common
- __layout.svelte
- page_a.svelte
- page_b.svelte
我想知道__layout.svelte我当前所在页面的名称。例如，当我打开时，/common/page_a我想__layout显示page_a. 如果我有动态路由和文件[name].svelte，那么我可以name通过 访问值，这会很容易page.params.name，但由于这些是静态的，我不知道如何以解析 URL 之外的另一种方式可靠地访问它。
推荐指数
解决办法
查看次数
如何在 GitHub 页面上托管 SvelteKit（适配器静态）项目？
我想在 GitHub 页面上托管一个 SvelteKit 项目，但显然我还没有找到正确的设置。我试过
import adapter from '@sveltejs/adapter-static';
/** @type {import('@sveltejs/kit').Config} */
const config = {
kit: {
adapter: adapter({
pages: 'build',
assets: 'build',
fallback: null,
precompress: false
}),
appDir: 'app',
prerender: {
default: true,
},
trailingSlash: 'always',
}
};
export default config;
trailingSlashSvelteKit 文档提到了该选项_从默认值中删除appDir: '_app'，因为有人提到它可能会因为 jekyll 而导致问题。.nojekyll如果将空文件添加到项目中（不确定是否添加到项目的绝对根目录或托管的文件夹中），则此步骤应该是不必要的，无论哪种方式我都没有看到任何区别
构建后运行时，preview一切看起来都很好。但是，当打开已部署的页面时，所有文件.css和.js文件都有404状态。我缺少哪个设置？
推荐指数
解决办法
查看次数
标签 统计
sveltekit ×10
svelte ×9
github-pages ×1
href ×1
monorepo ×1
svelte-3 ×1
turborepo ×1
typescript ×1
webstorm ×1