问题标签 [gridsome]

我正在使用vue.js并gridsome制作个人作品集。我是怎么遇到这个问题的，在第一次加载页面时，图标太大了，突然又恢复到正常大小。这是我的网页：farzinnasiri.com
我在这些网站上使用 cdn，所以我不知道每个人都能看到这个问题，但在我第一次加载 chrome 和 Firefox 时，下方的箭头按钮View Portfolio太大了。这些也是那部分代码：

的CSS：

这也是我的main.js文件：

我在网上发现了一些类似的问题，但我因为他们中的大多数都使用纯 html/css 而我使用vue这些并没有帮助我找到答案。任何身体都可以帮忙吗？

我正在使用Vue.js并Gridsome为自己创建一个投资组合。但是，当我在站点中添加一个 JSON 文件以包含我的个人资料信息时，我遇到了一个问题。这就是我在Index.vue组件中导入文件的方式：

这是我使用它的方式：

当我在开发中运行项目（命令gridsome develop：）时，一切正常并且数据被正确读取。但是，当我想构建在文件夹gridsome build中创建构建文件的项目（命令dist：）时，会发生此错误：

这是我的项目结构（src 文件夹）：

这是我的package.json：

我真的不知道问题出在哪里，需要帮助来解决它。谢谢你的时间

我想在我的 Gridsome 项目中使用 Bootstrap 材料设计库（ https://fezvrasta.github.io/bootstrap-material-design/ ）。

不幸的是 jQuery 和 Popper.js 不起作用（jQuery/Popper.js 未定义）。使用默认的 Bootstrap 4 就像一个魅力。

这是我的 main.js：

此外，导入 Bootstrap 和 jQuery 和 Popper.js 不起作用。

当然我可以直接在我的 html 模板中引用它，但我想将它包含在我的构建过程中......

在我的 app.scss 中也可以使用 scss 文件@import "~bootstrap-material-design/scss/bootstrap-material-design";。

关于如何在我的 main.js 中导入 jquery 和 popper.js 的任何想法？

它在开发模式下工作，但不能构建：'ReferenceError: window is not defined'

我明白这是 SSR 支持的问题，虽然它说它支持它

我尝试实现一些类似的集成方法，如下所示：

https://gridsome.org/docs/assets-scripts/#without-ssr-support

在 Gridsome 中导入 Vue-Navigation-Bar

我在 main.js 和我的 template.vue 文件中尝试了很多方法，但我无法理解完美调整解决方案的逻辑。

我最后的开发方法：

在我的 template.vue 文件中：

还尝试将“容器”选项设置为“#app”或“#body”添加到正文中，但即使在开发中也不起作用。

我使用gridsome-source-mysql插件从 MySQL 获取数据。

文章有50多个类别，我想为每个类别创建一个页面。

现在我的代码如下所示：

• ./src/components/Category01.vue文件：

• ./src/components/Category02.vue文件：

除了类别名称不同之外，所有内容都相同。

有没有更好的方法为每个类别创建一个页面？

谢谢！

如果我在索引内部使用 Pager 可以正常工作，但是当我在组件内部使用它时，我得到的却是不工作。有什么帮助吗？

和 GraphQl

我有以下简单的组件：

（.svg宽高约64）

在小宽度中提供漂亮的方形图像：

但是一旦我开始增加宽度的窗口大小，它就会伸出.svg

我尝试使用几个g-image'sfit参数但没有运气。

我没有得到什么？

编辑实时 URL 以展示bitcoin-blocks-info-site.s3-website-eu-west-1.amazonaws.com

编辑

似乎当我应用b-container脚手架时，问题就消失了：

我讨厌这样做（分享整个代码），但我觉得我别无选择。在过去的两天里，我一直在用头撞墙。这是一个接一个的问题。目前，我非常接近让表单工作。

由于某种原因，提交了一个空字段。找不到原因，真的很难调试。

如果有什么想到或跳到您身上，我将非常感谢您的帮助！提前致谢。

PS 我使用了来自Netlify和CSS-Tricks的指南

编辑

我的 POST 请求的参数似乎是合法的：

然而，反应有点奇怪。由于某种原因，它正在返回整个页面：

我用 Gridsome 和 vuew-remark 创建了一个文档站点。我将每个文件夹的文档分组。

有这样的结构：

我想要一个包含文件夹内元素列表的页面，例如，我可以创建一个 index.md 生成带有查询的列表，但我需要将它复制到所有其他文件夹。如何配置 gridsome 使其自动生成（当然，提供通用模板）。

像这样的东西：

我有一个 Gridsome 站点，我正在尝试将其部署到 AWS Amplify。

该站点在本地构建良好且没有错误gridsome build，但在 AWS Amplify 上却失败了。

我最初认为该错误与我正在使用所需标签的非 SSR 组件有关<ClientOnly>，因为这会在我的本地构建中引发警告。但是，我已经删除了该组件并且问题仍然存在。

我还认为这个问题可能是由于与 webpack 相关的包需要一些过时的依赖项，但在尝试解决这些问题几个小时后，我相对确信情况并非如此。

我不太了解错误日志，但我认为问题可能与我网站上的大量图像有关，并且 AWS AmplifyENOMEM在处理它们时内存不足 ( )。如果这甚至是原因，我还没有找到增加 AWS Amplify 内存分配的方法。

AWS Amplify 日志提供以下信息：

我的 package.json 包含以下内容：

在尝试解决此问题时，我将不胜感激。

先感谢您。

更新#1

我现在很确定这是由于在我的网站上通过<g-image>.

我决定尝试使用 AWS CodeBuild 进行构建，看看是否有更多信息。它也失败了，但确实给了我一些更有帮助的错误。

当我删除了除少数图像之外的所有图像时，构建工作正常。一旦我以不同尺寸显示超过 300 张图像，事情就会开始失败。错误消息：

所以，是的，我想这是一个 Gridsome 错误？

更新#2

添加文件会node-options=--max_old_space_size=4096导致.npmrc构建挂起并最终超时。

更新#3

批量调整图像大小，使最大宽度/高度为 2000 像素（有效最大文件大小约为 2MB）。构建现在成功。

希望有人可以提供解决方案，以便我们可以从源文件构建而无需预处理图像。