标签: sveltekit
在 SvelteKit 中更改 <html lang>
我怎样才能改变
<html lang="en">
到
<html lang="de">
使用 svelteKit？我构建静态页面：
export default {
kit: {
adapter: adapter({
// default options are shown
pages: 'build',
assets: 'build',
fallback: '404.html',
precompress: false
}),
prerender: {
// This can be false if you're using a fallback (i.e. SPA mode)
default: true
}
}
};
感谢帮助
推荐指数
解决办法
查看次数
在 SvelteKit 项目中全局包含类型
SvelteKit v1.0.0-next.354
在我的所有商店、组件和 API 中，我必须手动设置import类型才能使用它们，以防止 VS Code 中出现 TypeScript 错误：
import type { MyType } from '$lib/types`
我尝试将我的类放入其中app.d.ts，但这没有用。
declare namespace App{
export class Aircraft{
...
}
}
对于一个包含数十个文件的非常大的项目来说，这变得相当麻烦。
有没有某种方法可以将我的所有类型全局包含在一个位置，以便它们可以在我的项目中的任何文件中使用？我对 TypeScript 很陌生，不确定它是如何工作的。
推荐指数
解决办法
查看次数
如何在 SvelteKit 中使用 SSR 从服务器传递数据？
我习惯于将 Express 与模板引擎一起使用，例如 Handlebars。我想开始使用 Svelte 和 SvelteKit，但我不确定如何开始使用两者。我坚持将数据从服务器传递到前端。在 Express 中，我通常会连接到数据库，然后将数据传递到res.render，然后由模板引擎接管。到目前为止，我认为我必须运行一个handle函数来传递数据，然后我可以从我的页面访问它。但似乎句柄函数针对每个请求运行，如果我的所有页面都需要不同的数据，这是否意味着我必须为每个页面使用巨大的 switch 语句或其他语句？
谁能告诉我这是否是传递数据的正确方法，或者是否有更好的方法。抱歉，我对 Metaf Rameworks 和 Svelte 还很陌生。
推荐指数
解决办法
查看次数
使用从父组件传递的值初始化 prop，但稍后映射到存储中的反应变量/值
在 Parent.svelte 中：
<Child {initialName}/>
在Child.svelte中
export let initialName;
<p>{initialName}</p>
这工作正常，initialName 是根据从 Parent 传递的值呈现的。但我想稍后将其映射到存储中的反应变量（一旦呈现初始合成）。
import {_name} from './store.js';
$: initialName = $_name;
不起作用，因为初始名称将立即被存储中的值覆盖。目前我正在执行以下解决方法。
let initialized = false;
let l_name;
$: if (true || $_name) {
if (initialized) {
l_name = $_name;
} else {
l_name = initialName;
initialized = true;
}
}
<p>{l_name}</p>
这可行，但我发现它有点老套，而且样板太多。还有其他干净的方法来完成同样的任务吗？一种选择是直接设置值来存储（在父组件中）并使用它<p>$_name</p>。但是，当我刷新页面一瞬间时，这会导致保留存储中的旧值的问题。
推荐指数
解决办法
查看次数
如何使用网络托管服务部署 SvelteKit 应用程序？
我是一名网络开发人员，但不擅长网络，这就是为什么我付费网络托管服务来为我做这件事。我所需要做的就是通过 FTP 将文件上传到名为 的文件夹中/httpdocs，这是网站的根地址，然后就可以了。
对于 Svelte Sapper，通过使用命令可以很好地工作npm run export，该命令会生成一个包含index.html. 我需要添加的只是.htaccess根目录中的一个文件，如下所示。我不熟悉这种语法（再说一次，网络不是我的事），但我所知道的是第二行发挥了魔力，将所有指向域的 URL 重定向到根目录。然后 Svelte 负责应用程序内的路由。
RewriteEngine on
RewriteBase /
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^(.*)$ / [NC,L]
SvelteKit 没有“导出”npm 脚本。它确实有一个“构建”脚本，但不会生成index.html.
如何导出我的应用程序并创建可以上传到网络服务器的捆绑包？
推荐指数
解决办法
查看次数
窗口未在 svelte 中定义 - 使用 svelte 存储
我有一个 svelte 商店，有以下代码
import { writable } from "svelte/store";
import { onMount, onDestroy } from "svelte";
export const modalStore = () => {
const { subscribe, update } = writable({
showModal: false,
});
onMount(() => {
window.addEventListener("keydown", handleKeyDown);
});
onDestroy(() => {
window.removeEventListener("keydown", handleKeyDown);
});
const handleKeyDown = (e: KeyboardEvent) => {
if (e.key === "Escape") {
update(stateObj => ({...stateObj, showModal: false}));
}
}
return {
subscribe,
openModal: () => update(stateObj => ({ ...stateObj, modal: true })),
closeModal: () => …推荐指数
解决办法
查看次数
如何在 svelte 中创建 cookie 并访问它？
我正在尝试在 svelte 中创建一个 cookie（并且我也在使用 svelte 套件）并访问它。我想使用 cookie 进行身份验证，更具体地说，是存储 JWT 令牌。
我尝试实现纯 JS 代码，例如getCookie()W3Schools - JavaScript CookiessetCookie()所示。但我无法访问该文档。我还尝试过从npm 包进行序列化，如下所示，并且我还尝试过使用浏览器，如下所示。cookie
import { serialize } from "cookie";
import { browser } from '$app/environment';
推荐指数
解决办法
查看次数
如何在 sveltekit 中定义 BASE_URL？
我想将用于生产和开发的 BASE_URL 定义为要在 API 调用中使用的环境变量，如下所示：
DEV_BASE_URL="http://127.0.0.1:8080"
PROD_BASE_URL="https://example.com"
我已在.env文件中定义它们，然后在我的组件中尝试导入它们，如下所示：
import {env} from '$env/dynamic/public'
console.log('DEV_BASE_URL is:', env.DEV_BASE_URL)
但我进入DEV_BASE_URL is: undefined了控制台。
关于不同类型环境的文档让我更加困惑。文档太糟糕了。
因此，感谢您帮助以惯用的方式解决这些全局变量。
推荐指数
解决办法
查看次数
SvelteKit 中的 Google API 自动完成
我正在构建一个应用程序，我需要从 API 获取返回值并将其绑定到我的变量。我已经被这个问题困扰了好几天了，无法继续下去。
这是我的代码：
<script>
let address = "";
async function addExample() {
const response = await fetch(
"https://api",
{
method: "PUT",
headers: {
"api-key":
"api-key",
},
body: JSON.stringify({
address: address,
}),
}
);
}
</script>
<svelte:head>
<script
src="https://maps.googleapis.com/maps/api/js?key=my-key&libraries=places&callback=initAutocomplete"
async
defer
>
</script>
<script>
let autocomplete;
function initAutocomplete() {
const input = document.getElementById("autocomplete");
const options = {
componentRestrictions: { country: "au" },
strictBounds: false,
};
const autocomplete = new google.maps.places.Autocomplete(
input,
options
);
}
autocomplete.addListener("place_changed", onPlaceChanged);
function onPlaceChanged() {
address …推荐指数
解决办法
查看次数
刷新页面后新的谷歌登录消失
我遵循 google 提供的指南来集成新的 google 登录。我使用Google 提供的代码生成器创建了 HTML 。
这里我附上了完整的代码
<svelte:head>
<title>Home</title>
<meta name="description" content="Svelte demo app" />
</svelte:head>
<section>
<div class="h-screen">
<div
id="g_id_onload"
data-client_id="534101779287-bm07dc8v4ln4kulqbql61nsglcku74vg.apps.googleusercontent.com"
data-context="use"
data-ux_mode="redirect"
data-login_uri="http://localhost:5173/auth/callback"
/>
<div class="bg-red-300 h-80">
<div
class="g_id_signin"
data-type="standard"
data-shape="rectangular"
data-theme="outline"
data-text="signin_with"
data-size="medium"
data-logo_alignment="left"
data-width="180"
/>
</div>
</div>
</section>
第一次渲染页面时效果很好。
Command+R当我们使用或单击浏览器中的重新加载图标刷新页面时， “登录”按钮消失。
推荐指数
解决办法
查看次数
标签 统计
sveltekit ×10
svelte ×8
javascript ×4
html ×2
typescript ×2
binding ×1
cookies ×1
dom ×1
google-api ×1
svelte-3 ×1
tsconfig ×1
window ×1