我对 svelte 尤其是 SvelteKit 还很陌生。目前，我正在做 2 个项目。
第一个是 SPA，其中我使用svelte-spa-router来管理不同的状态，并提供像在老式网站中那样来回导航的功能。这非常有效:)
第二个项目是 SvelteKit 应用程序。我有 3 个用例：
首先，我认为如果每个用例需要的话能够预取某种 JSON 数据会很有趣，但另一方面，我不想为每个子用例创建一个路由页面因为我不希望用户每次执行简单操作时都刷新页面。因此，我使用 3 条路线在这 3 个“用例”之间导航：
src/routes/search_product/+page.svelte
src/routes/create_product_page/+page.svelte
src/routes/show_top_10_products/+page.svelte
现在，我遇到了一个问题...创建产品页面需要 3 个步骤。这 3 个步骤由以下 3 个不同的 Svelte 组件表示：
EnterProductBasicInfo.svelteUploadPictures.svelteGivePrices.svelte如果用户正在创建产品页面并处于步骤 2)，则会向他显示该UploadPictures.svelte组件....但是如果他按后退按钮，他将退出该create_product_page路线，而不是返回到步骤 1)是EnterProductBasicInfo.svelte组件。
所以，我想我可以使用我svelte-spa-router在 SPA 中使用过的，但我在这里询问专家 SvelteKit 中是否有另一个内置解决方案能够管理路线，而无需每次刷新整个页面路线改变。如果您有一些关于 SPA、SSR、预加载与预取的好链接，我会接受它，因为它对我来说仍然有点模糊。
非常感谢你的帮助。
昨天我将 SvelteKit 版本从 v1.0.0-next.241 更新到 v1.0.0-next.287，因为我无法获取组件中的数据。我收到一条错误消息：Unexpected token < in JSON atposition 0。当我尝试解析响应时发生错误：await response.json()
自版本 241 以来，关于获取数据有什么变化吗？而现在该怎么做呢？
索引.svelte
<script>
import { session } from '$app/stores';
import { onMount } from 'svelte';
onMount(async () => {
const response = await fetch('/content', {
method: 'POST',
body: JSON.stringify({
user_id: $session.user.id
}),
headers: {
'Content-Type': 'application/json'
}
});
const data = await response.json(); // error occurs on this line
});
</script>
索引.js
export async function post({ request }) {
const data = await request.json(); …我是 Svelte 的新手，并开始在其上构建一个简单的应用程序。我不确定我是否深入了解 Svelte 的生命周期，但看起来文档中没有启用此功能的选项，网上也没有任何关于 Vue 中“保持活动”类似功能的信息。
我正在尝试获取我使用 SvelteKit 编码的 API 端点的 URL 中的参数。
\n我想利用商店来实现这一点：
\nimport {page } from '$app/stores';
然后，在我的 GET 端点中：
\nexport async function get({ request, params }) {\n const path = params.auth;\n console.log($page.URL);\n\xe2\x80\xa6\nSvelte 给我一个错误：$page is not defined
我错过了什么？
\n我使用 SvelteKit 和 @sveltejs/adapter-node 构建了一个应用程序，并将其部署到通过 Git 使用 Plesk 管理的服务器上。我已经激活并配置了node.js-Plugin并正确设置了所有路径，但我无法使用Phusion Passenger（这是Plesk使用的应用程序服务器）运行它。我收到以下错误：
/usr/share/passenger/helper-scripts/node-loader.js:80
return originalRequire.apply(this, arguments);
^
Error [ERR_REQUIRE_ESM]: require() of ES Module /var/www/vhosts/mydomain.host/build/index.js from /usr/share/passenger/helper-scripts/node-loader.js not supported.
Instead change the require of index.js in /usr/share/passenger/helper-scripts/node-loader.js to a dynamic import() which is available in all CommonJS modules.
at Module.require (/usr/share/passenger/helper-scripts/node-loader.js:80:25)
at loadApplication (/usr/share/passenger/helper-scripts/node-loader.js:243:2)
at setupEnvironment (/usr/share/passenger/helper-scripts/node-loader.js:214:2)
at Object.<anonymous> (/usr/share/passenger/helper-scripts/node-loader.js:133:1) {
code: 'ERR_REQUIRE_ESM'
}
Node.js v17.6.0
有没有解决方案可以让我的 SvelteKit 应用程序在 Plesk 上运行？
我已经尝试在其中构建一个entry.cjs文件（如本线程中的建议），但效果不佳。import("index.js");
接下来是我的（简化的）项目结构：
appname
|
|__src
| |__lib
| |__routes
|
|__jsconfig.json
在 jsconfig.js 文件中，我有一个路径键，其别名为 $lib 形式的“./src/lib”文件夹。
{
"compilerOptions": {
"baseUrl": ".",
"paths": {
"$lib": ["src/lib"],
"$lib/*": ["src/lib/*"],
}
},
"include": ["src/**/*.d.ts", "src/**/*.js", "src/**/*.svelte"]
}
我想以与 $lib 相同的方式使用 $routes 别名访问路由文件夹。但是如果我在上面的 JSON 文件中添加 "$routes": ["src/routes"]，sveltekit 无法解析以开头的路径'$routes/somefile'
例子：
{
"compilerOptions": {
"baseUrl": ".",
"paths": {
"$lib": ["src/lib"],
"$lib/*": ["src/lib/*"],
"$routes": ["src/routes"],
"$routes/*": ["src/routes/*"],
}
},
"include": ["src/**/*.d.ts", "src/**/*.js", "src/**/*.svelte"]
}
端点.js
import { db } from '$routes/db';
我究竟做错了什么？
我正在尝试使用“active”类来设置我的网络项目当前活动选项卡的样式。为了定位我正在使用的选项卡元素
onMount(() => {
const links = document.querySelectorAll(".topnav a");
});
然后我使用反应式语句来设计适当的元素，如下所示
$: {
links.forEach((link) => {
if (link.getAttribute("id") === $page.url.pathname) {
link.classList.add("active");
} else {
link.classList.remove("active");
}
});
}
但是，我无法将links变量共享给我的反应语句。我还尝试document.querySelectorAll放入我的反应语句（根本不使用 onMount），它完美地工作，直到我重新加载页面。对此的传统方法是什么？
我需要一种为浏览器指定 Buffer 别名的方法。
不确定哪个模块需要这个，但它可能与加密相关。
500
Buffer is not defined
@http://localhost:3000/_app/pages/index.svelte-2478ade3.js:1:111754
问题在于使用 Torus 节点库。
这是一个存储库： https: //github.com/ralyodio/torus-bufer
npm i
npm run build
npm run preview
...你会看到错误。npm run dev由于节点处理请求，因此工作正常。问题仅在于浏览器环境。
中的polyfillsvelte.config.js似乎不起作用：https ://github.com/ralyodio/torus-bufer/blob/master/svelte.config.js
更新：所以看起来更大的问题是，在使用 sveltekit 静态适配器进行 npm run build 时，不遵守 NodeGlobalsPolyfillPlugin 。
I 存储在可写存储中的值
import { writable } from 'svelte/store'
export const user = writable(null)
export const isLoggedIn = writable(false)
然后我导入这些值并将它们设置在索引中
import { getAuth, signInWithPopup, GoogleAuthProvider } from "firebase/auth";
import { user, isLoggedIn } from "../stores/authStore";
const provider = new GoogleAuthProvider();
const auth = getAuth();
function signIn() {
signInWithPopup(auth, provider)
.then((result) => {
user.set(result.user)
isLoggedIn.set(true);
console.log($isLoggedIn);
console.log($user.email);
if ($user.email.includes(".edu")) window.location.href = "/home";
else window.location.href = "/Sorry";
//sign user into db
})
.catch((error) => {
console.log("Someting wrong");
console.error(error);
});
}
当我更改页面并使用再次打印值时
console.log($userValue, $isLoggedIn) …我的网站上有多个页面，只有主页应该有不同的布局？我怎样才能实现这个目标？
src/
- page1/ <- LayoutB
- page2/ <- LayoutB
- page3/ <- LayoutB
- index.svelte <- LayoutA
如果我__layout.svelte在src/文件夹中使用它将适用于每个页面。