问题标签 [sveltekit]
For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.
javascript - SvelteKit:如何使用内联的 JS 和 CSS 将构建输出为单个 HTML 文件?
是否可以将 SvelteKit 项目构建为内联所有 JS 和 CSS 的单个输出 HTML 文件?是否可以将 SvelteKit 配置为支持这种输出格式,或者我是否需要使用外部构建工具?
单个 HTML 文件输出是我项目中的核心要求。我正在使用配置构建一个SvelteKit ssr: false
SPA 。@sveltejs/adapter-static
fallback: 'index.html'
我以前使用过https://github.com/richardtallent/vite-plugin-singlefile通过简单的vite
+svelte
设置来完成此操作 - 这效果很好。但是,我无法在我的 SvelteKit 项目中添加vite-plugin-singlefile
vitesvelte.config.js
插件。
这是我尝试过的 SvelteKit 配置:
我还研究了使用其他解决方案来内联所有 CSS 和 JS:
- https://github.com/remy/inliner - 这不支持内联
<script type="module">
SvelteKit 输出并且我需要转换为内联脚本。 - 这里提到的解决方案不起作用:Output Single HTML File from Svelte Project
- https://github.com/jonathantneal/posthtml-inline-assets - 不支持esm 模块内部的
<script type="module">
动态调用。import()
任何想法都会有所帮助!
server-side-rendering - Sveltekit 和 SSR
在 sveltekit 的上下文中,我需要一些帮助来理解 SSR。我注意到该load
方法在服务器和客户端上都被调用,我无法解决这个问题。我想它需要初始化客户端组件的状态,但为什么不将 SSR 产生的道具传递给客户端呢?
如果在 SSR 期间需要完成数据库请求怎么办?现在从客户端重复相同的数据库请求?如果这甚至不可能呢?我知道我可以使用browser
from$app/env
在服务器和浏览器上运行不同的代码,但是我返回什么道具?有没有办法将数据从服务器端调用load
传递到客户端调用?
node.js - Sveltekit - 500 进程未定义或导出未定义
我正在尝试从 Sveltekit ( SvelteKit v1.0.0-next.114
) 应用程序调用 GRPC 服务(一个 dGraph api)。
我正在使用writable
来自 的商店svelte/store
,并且能够将调用 GRPC 服务的响应记录到控制台。
但是,我们将商店导入到我的 svelte 组件中,使用以下内容,我收到以下错误。
错误
替代 Dqraph 客户端
我也尝试使用dgraph-js-http客户端。
观察结果(见下文)是相同的 - 即,在短时间内页面看起来像预期的那样。
首先,我收到一个错误,看起来与https://github.com/vitejs/vite/issues/2579上描述的相同。但是,我没有保存它,因此无法在此处粘贴确切的错误。
然后我尝试了
- 删除
node_modules
- 跑步
npm install
- 跑步
npm dev run
然后,但是发生了以下错误。
错误 - Buffer2 未定义
其他尝试包括:
- 添加
export const hydrate = false;
到.svelte
文件中,但这没有任何区别。 - 与上述观点相关,我尝试添加
context="module"
标签<script>
,因为这是与水合物相关的 Sveltekit 文档中显示的内容 - 请参阅https://kit.svelte.dev/docs#ssr-and-javascript-hydrate。然而,这导致了一个错误Cannot reference store value inside <script context="module">
观察
Sveltekit 应用程序的网页会在短时间内显示 dgraph grpc 服务调用的结果 - 可能是一秒钟。然后显示上面的错误消息。
netlify - 如何向 Netlify 提供 Firebase 管理员凭据?
我试图GOOGLE_APPLICATION_CREDENTIALS
在 Netlify 上配置环境变量以便使用firebase-admin
,但是如何在那里获取实际的 JSON 文件?
显然我不能将它包含在 git 中。
svelte - 从一个 SvelteKit 应用程序调用组件到另一个 SvelteKit 应用程序
注意:我已将我的 Sapper 应用程序迁移到 SvelteKit(下面的更新 3),因此现在正在寻找 SvelteKit 的解决方案。我有多个使用 Sapper 构建的 MFE(微前端),它们位于不同的服务器下。我想在另一个 MFE 中调用/呈现一个 MFE 中有一个纤细的组件(呈现 HTML 内容)。我怎样才能做到这一点?我尝试在本地同时运行/服务两个 MFE 并执行了 fetch(route-that-loads-component),但它在响应中返回了一个 POJO,我不知道如何处理它:
更新 1:
我可以通过做得到 MFE 的响应response.text()
,这就是它的样子:
但是,Sapper 正在替换向调用 MFE 的 baseURL 发送响应的 MFE 的 baseURL,使其不可水合,因为 client.js 和 client.css 不可访问(404s)
即使我最终解决了这些基本路径 URL 问题,在一个页面上启动 2 个 Sapper 应用程序是否仍然有效?
更新 2:
我以某种方式设法为要请求内容的 MFE 添加了静态 baseURL,现在我遇到了水合问题,因为 Sapper 无法在一页中为 2 个 Sapper 应用程序提供水合。
更新 3: 我已将我的 Sapper 应用程序迁移到 SvelteKit。因此,现在寻找有关如何使用 SvelteKit 实现这一目标的建议!
将组件从一个 MFE 调用/导入到另一个 MFE 的任何其他解决方案,或者将不胜感激!
javascript - 如何使用 sveltekit 提供纯 json 文件?
我尝试在我的端点 routes/users.json.ts 中做这样的事情:
我的静态文件夹位于路由文件夹中。
我收到了这个错误:
我错过了什么?
重要的是它必须是静态 json 文件。
sveltekit - 在 SvelteKit 中使用 JWT 进行服务器端授权
我在向服务器发送 JWT 令牌并使用它来授权load
处理程序中的访问时遇到问题。我在客户端上使用 Firebase 进行身份验证。登录 ( onAuthStateChanged
) 后,我向端点发送POST
带有令牌的请求:/api/login
在hooks.js
:
在load
方法中:
所有这一切都很好,除了登录后的任何客户端导航都被拒绝,因为session.user
仍然是未定义的。通过在浏览器中键入 URL 进行导航时,它可以正常工作,之后客户端导航也可以工作。
任何想法为什么和做什么?
svelte - Sevltekit 在 iis 服务器上显示 404 用于动态路由
我使用 Sveltekit 创建了一个小项目。用于列出产品和产品详细信息。在 IIS 服务器上发布后,如果用户单击产品,它会正确重定向。但是当我尝试刷新页面时出现 404 错误。这是我的项目文件夹详细信息。
url : http://venna.in 之后点击它会重定向的任何项目 ex: http://venna.in/INDIAN-WOK-4-LITER?id=2f8643c22cda4becaef8213ef4e7025a
在此页面上刷新后,它将显示 404 - 找不到文件或目录。请帮忙
svelte - 如何在 sveltekit netlify 中使用文件 api
我有这样的代码
和我的服务器路由
它在开发中运行良好,但在 netlify 上的生产中不起作用,因为src/data/posts
不再有真正的目录。如何让 sveltekit 在构建时生成这个数组?
我曾尝试使用静态适配器,但它无法正确生成路由,因为尽管网站上所有页面都有链接,但它们不会立即生成。所以我想我必须使用 netlify 适配器。
javascript - 如何在 sveltekit SPA 模式中构建单个(非 ESM)bundle.js 文件?
我目前正在使用 svelte 构建一个 WebApp (SPA),并且由于内置路由器而希望迁移到 sveltekit。不需要 sveltekit 的服务器端功能,因为所有内容都是从 REST API 动态加载的,而 SEO 并不是真正需要考虑的问题。
在adapter-static
SPA 模式下,应用程序按预期工作,但是构建的应用程序依赖于 ESM 导入语法。遗憾的是,项目要求之一是它必须支持一些不支持导入语法的浏览器。
有没有办法用 rollup.js 构建像 svelte 这样的 sveltekit 应用程序呢?表示格式中的单个bundle.js
文件iife
。