问题标签 [jamstack]

一般来说，我是建立网站和开发的新手。我正在用 iframe 中的视频构建一个静态站点，这些 iframe 也在容器 div 中。像这样

我的 iframe 的 CSS 是这样的：

我正在尝试让视频在更大的“弹出”窗口中播放。不离开页面。但我一无所知。有人可以让我走上正轨吗？

我有 javascript 函数，我想同时运行服务器端和客户端。服务器端使用node.js并且可以很好地处理导入。

但是，客户端我想要一个带有内联 javascript 的脚本标签。为了实现这个目标，我知道我需要一个捆绑器来将模块拉入主脚本文件。我选择汇总来完成这项工作。

这是我尝试过的一个例子。我做了一个模块test.js。这是一个返回字符串的简单函数：

这是主要的 javascript 文件，main.js. 我要将test.js函数拉入的文件：

main.js这是捆绑后我想要的样子：

我想简单地将函数拉入文件中。

相反，汇总会产生以下结果：

代码比以前大得多，关键是模块没有合并到主文件中。它仍然是一个模块，但具有不同的语法。Rollup 有许多输出选项，都产生相似的结果。

这是我的rollup.config.js文件：

当然，对于了解正在发生的事情的人来说，这是预期的输出。但我不明白。

如何在构建时将 javascript 合并到一个文件中？

我忽略了一个更简单的解决方案吗？

编辑：使用commonjs模块并将输出格式设置为iife以下结果：

它有所不同，但结果仍然不包含测试功能。

我无法将 Next.js 项目部署到 Netlify。昨天运行良好，但现在我在部署时遇到错误。

在这里，我附上了错误日志截图和完整日志。

从错误日志中，我猜错误应该来自es5-ext模块。

这是我的 package.jon 文件内容。

我该如何解决这个问题？

我想知道这是否是一种不好的做法。将托管服务与其他基础架构的供应商分离是否有任何性能成本？

我在 JAMstack 电子商务上使用静态生成的 Nuxt 和 Netlify 遇到了一个奇怪的问题。

我在 Netlify 上推送了我的网站，一切顺利，生成阶段控制台上没有错误。当我在桌面上访问生成的站点时，一切都很好并且加载正确。在移动设备上，内容消失了！如果从主页导航，则在生成期间从 Prismic 获取的动态内容将不会加载（需要重新加载页面才能查看它们）。

我将留下构建的 netlify 预览链接，以便您遇到同样的问题。加载主页（在手机上）并单击“立即购买”按钮，您将看到一个没有内容的页面；尝试重新加载页面，一切都会恢复正常。我注意到，如果您刷新或登陆一个不是主页的页面并开始导航该网站，一切正常，所以只有当导航开始是从移动主页开始时才会出现问题！而且，如果你登陆首页，去Shop Now，然后不重新加载就返回，连首页的内容都消失了！

https://60352eb4c2e7180007325b89--leconturbanti.netlify.app/en

我不明白为什么，因为任何地方都没有控制台错误。在桌面上一切都很好。没有 css 隐藏规则，没有移动设备的 v-if，什么都没有。Nuxt 水合似乎有一个错误？

有人有同样的问题吗？

我对 JAMstack 开发方法很陌生，但对使用 JavaScript/Typescript 和 HTML 感觉很熟悉。

我正在做一个项目，我的 SPA 将使用 gridsome 用 JAMstack 编写。SPA 将使用一个 API，该 API 将在 ASP.NET Core 中编写，通过 JSON 端点公开数据。

我的问题是——人们如何处理多种环境？

当我使用 ASP.NET Core 开发所有内容时，我在服务器上使用环境变量，因此它将 API 基本 URL 呈现给我的标记，因此它可以从我的 JavaScript 中使用。

所以在开发中我的基础 api url 可能是 https://localhost:5000，在我的测试环境中它是https://test-api.somespa.sometld而我的生产将是https://api.somespa.sometld。

我可以看到很多人使用 *.env 文件来区分不同环境之间的值但是通常当我使用 ASP.NET Core 构建时，我总是构建一个可以同时部署到测试和生产环境的包 - 由于服务器上的环境变量可用。

但是当我开发一个静态网站时我能做什么呢？我知道我可以构建一个用于测试的包和另一个用于生产的包 - 但这并不能确保这两个包完全相同（除了更改的 api 基本 url）。

那么你做了什么来适应多种环境呢？

我正在使用 Next.js (SSG) 和 Storyblok (Headless CMS) 开发 JAMstack 网站，并使用 Storyblok Content Delivery API 从 Storyblok 获取内容。

我创建了具有 Storyblok 配置和 Bridge 功能的 Storyblok 服务。

StoryblokService.js

我正在调用桥接函数并在从 app.js 调用的 layout.js 中获取布局内容。

应用程序.js

Storyblok 桥在 layout.js 中被这样调用

布局.js

问题陈述

使用 Storyblok 进行实时内容更新，即如果我更改 Storyblok 中的一些内容并发布它，那么当我重新加载页面时，Next.js Web 应用程序中的内容也会更新，在开发/本地环境中运行良好，但是生产环境中的相同操作或将 Next.js 代码发布到 Vercel 不起作用。

似乎配置错​​误，或者可能与 Storyblok webhook 或工作流有关。

任何帮助，将不胜感激。提前致谢！

我正在编写一个 NextJS 应用程序并使用静态 HTML 导出，因为我希望我的应用程序成为 Jamstack 应用程序。

我正在尝试使用基于作为路由一部分的用户名参数的动态路由设置我的路由：localhost:3000/:username/posts

例子：localhost:3000/jdoe/posts

此路由将显示用户 jdoe 的所有帖子。

我希望我的 /posts 页面在没有 SSR 的情况下静态加载，然后通过 API 调用获取帖子。

但是，NextJS 会抛出 404，因为在构建时它不会为特定用户名生成页面。

有没有办法告诉 NextJS 所有请求都/:username/posts应该映射到posts页面？我想在没有 SSR 的情况下执行此操作，并且不必使用查询字符串来指定用户名，而是将其作为路径的一部分。我不需要为每个用户名生成一个页面。只希望我的所有用户加载相同的页面并在路由中使用用户名参数来加载他们的帖子。

我的目录结构如下所示：

目录结构

这种方法在本地有效，因为有一个开发服务器。但是，当我在 Netlify 中部署到暂存环境时，我使用next export静态 HTML 导出，这就是路由中断并返回 404 的地方。

我正在使用 Next10.0.5并部署到 Netlify

提前致谢！

我有一个托管在 Netlify 上的 Nuxt 静态应用程序。在mounted()钩子中，我调用了一个设置 cookie 的 Netlify 函数。这发生在页面加载并正常工作之后。

问题是，您可以在页面加载之前进行初始调用吗？Netlify 是否提供了某种方式来做到这一点？

Nuxt/Vue 代码：

被调用的 Netlify 函数：

我使用 vue cli 创建了一个 vue 项目：

我认为当我这样做时的输出npm run build将是一个单页应用程序 (SPA)。使用现有代码生成静态网站（SSG / Jamstack）需要什么？我知道我可以使用 Nuxt 轻松做到这一点，但我想知道如何在没有 Nuxt 的情况下做到这一点。

编辑：我认为我的意思是预渲染一些页面，以便对 SEO 更好。