问题标签 [gridsome]

我有一个使用 gridsome 构建的静态网站，我正在尝试使用 docker 容器化，并提出了以下 Dockerfile：

在通过以下方式运行容器后，Gridsome 默认使用端口 8080：

它没有失败，但我无法使用链接访问我的网站：http://localhost:8080，容器在我运行后立即停止执行。我尝试通过以下方式从容器中复制 ``` dist/`` 文件夹：

然后使用以下命令从终端手动提供：

它从终端工作，但为什么它在容器内失败？

我正在构建一个通过静态生成器（Gridsome，盖茨比替代品）生成的网站。这个静态站点生成器的特点之一是它输出优化的渐进图像（实时调整大小和裁剪）。

典型的图像组件如下所示：

<g-image src="~/image.png" width="500"/>

~是我的 /src/文件夹的别名。

有关如何使用此组件的更多详细信息的文档在这里：Gridsome -- Images

话虽如此，我想将我的 CSS 背景图像转换为<img>元素，以便我可以利用进度图像功能。有谁知道我可以如何转换下面的 CSS 并将图像放入<g-image>元素中？注意：出于艺术原因，我使用 CSS 伪属性来倾斜标题。

这是我的代码（使用JSFIDDLE）：

HTML：

CSS：

我已经成功地将 AWS Amplify 的 Auth UI 功能和组件与 Gridsome 集成以实现简单的登录/注销功能，但是当我尝试使用 Amplify Event Bus 访问

import { AmplifyEventBus } from "aws-amplify-vue"

我得到错误：

Error in mounted hook (Promise/async): "TypeError: Cannot read property 'Logger' of undefined"

我在 github 帖子上发现了一个类似的问题并添加了建议的

确实删除了警告，但 Auth UI Logout 组件将不再显示。我可以登录，但没有显示注销按钮。我不明白为什么当 UI 组件已经在没有它的情况下工作时，访问事件总线需要我将 Amplify 添加到 Vue 原型中，以及为什么即使我添加了它，组件仍然没有出现。

我试图查询一个集合并过滤它取决于 $path var，但它要么返回空，要么抛出错误

对于同一页面上的另一个查询，它工作得很好

我正在一个投资组合网站上工作，我需要在resume.pdf单击按钮时从本地文件中打开一个文件，但我无法使其工作。我正在使用gridsome和 vue.js。我最初尝试了这段代码：

但是当我点击链接（按钮）时，我收到了这个错误：

它转到的网址是：

之前有人问过我面临的问题： 使用VueJS 在另一个窗口中打开 PDF 文件 并使用 VueJS 打开 PDF。
我尝试使用提供的解决方案，但它们都没有真正起作用，而且我每次都遇到几乎相同的错误！我加载图像没有问题，但这个 pdf 文件不起作用。该文件位于src -> assets -> resume.pdf. 请注意，我尝试了许多打开文件的方法，但都失败了，包括使用 vue.jsmethods和windos.open()javascript 或required关键字或使用不同的方式来提供源文件的路径，例如 add@/assets/resume.pdf等。
下面是我的 package.json 文件：

网站的预览在这里： http: //farzinnasiri.ir。当然我还没有添加pdf文件，但理论上当有人点击MY CV按钮时，他/她应该被引导到浏览器中的简历文件......

最后一件事是我在最终构建的项目（文件夹）中找不到 pdf 文件，dist所以也许 vue.js 一开始就无法读取文件！
请在这里给我一些帮助。感谢您的关注

<amplify-authenticator>我在我的 Gridsome Vue 应用程序上使用 Cognito 登录用户并按预期工作，但我注意到“退出”按钮只有在未包含在标签中时才会显示。文档只是过时了还是有问题？

示例，而不是：

我正在写：

哪个有效。

这不遵循文档，但除此之外它似乎按预期工作。

以下是我在 main.js 中将 Amplify 添加到我的 Gridsome 项目的方法：

...

我正在尝试在 Gridsome 项目中使用完整日历 vue 组件（ https://github.com/fullcalendar/fullcalendar-vue ），如下所示：

但是，这会在构建时产生错误：

我了解完整日历不支持 SSR。因此，根据 Gridsome 文档（https://gridsome.org/docs/assets-scripts/#without-ssr-support），我这样做是为了导入组件：

我在 gridsome.config.js 中为它的依赖项创建了一个别名，如下所示：

并在mounted() 生命周期钩子中需要这些插件：

然后我将 FullCalendar 组件包装在：

mount() 挂钩中所需的额外依赖项没有问题。

但是我现在收到以下错误：

似乎 components() 无法导入“@fullcalendar/vue”组件。

导入“@fullcalendar/vue”组件时我做错了吗？

是否有另一种方法可以同时包含“@fullcalendar/vue”组件和没有 SSR 的插件依赖项？

我是 Gridsome（和 GraphQL）的新手，我想构建以下内容。我有员工与项目的 n 对 n 关系，并希望为每个员工生成一个页面，列出该员工从事的所有项目。我使用 Pages API 创建页面，这是可以工作的部分。但是，传递上下文/列出每个员工的项目是行不通的。

所有数据都在标记中，如下所示： 项目：

雇员：

gridsome.server.js：

Employee.vue 中的页面查询：

现在这不起作用，至少我正在尝试将对象用作数组，但我确信它还有其他问题。我希望有人能指出我正确的方向，不幸的是 Gridsome 文档很浅。

我正在寻找一种解决方案来在网格中的路线之间制作动画。我想创建从左到右的全宽和全高叠加动画。当覆盖全宽时，它应该替换插槽中的内容。

我想做的是

并在方法中

风格

它几乎奏效了，但我认为这不是路线转换的好习惯。如果您知道如何制作它，我将不胜感激。谢谢

我想将类别 slug 添加到我的博客文章的 URL 中。即：my-website.com/caterory-slug/post-slug

我正在设置这样的路径：

但是我在类别 slug 的 URL 中未定义。我可以用 ID 替换类别的 slug，它会起作用。类别的 ID 将在 URL 中。我可以在模板中访问类别的 slug，但不能在 URL 中访问。

在同一个模板中，我的图形 ql 查询如下所示：

查询的响应是：