问题标签 [gridsome]

我有一个用 Gridsome 编写的静态站点，我想将它部署到运行 Apache 2.4 的 LAMP 服务器上。在线查看我尝试了几种解决方案，包括目录中的 200.html 并在目录中添加 .htacces 文件，其中包含内容 -

但是站点无法正确加载（没有 css、js）并且所有产品页面都返回 404 Not Found。我在控制台中看到 css 和 js 文件都返回 404 代码。以下是 Apache 日志：

当我尝试访问其中一个产品页面时 -

更新：我看到了问题。查看开发控制台网络时，所有 URI 请求都是：

他们应该是

如何纠正这一点？谢谢..

我目前正在尝试使用 Buefy CSS 框架设置我的 Gridsome 应用程序的样式。除了 Carousel 之外，其他一切都运行良好（按钮、卡片等）。特别是<b-carousel>标签。

这是代码

请帮忙

更新

我最终向 gridsome 项目提交了一个 PR，以完成我在这里尝试做的事情。如果它被接受，将更新这个问题。同时，您可以查看我在我的项目分支中所做的更改。

背景

在进行本地开发时，我喜欢设置 SSL 以尽可能地匹配我的生产环境。对于一个典型的 Vue.js 项目，我按如下方式完成：

1. 在项目的根目录中，安装一个本地证书mkcert example.test
2. 更新我的hosts文件以映射127.0.0.1（本地主机）到example.test：

3. 更新 webpack 配置vue.config.js以使用证书，如下所示：

使用此设置，当我运行时，我npm run serve可以在https://example.test查看我的站点

我的目标

我想为Gridsome项目获得类似的配置设置，但到目前为止我尝试过的任何东西似乎都没有生效。

我试过的

这是我迄今为止尝试过的但没有奏效的方法：

尝试 #1：更新 webpack 配置gridsome.config.js

我尝试将我的gridsome.config.js文件更新为如下所示：

这似乎没有任何影响。

尝试 #2：更新 webpack 配置gridsome.server.js

同样，我尝试了类似的东西gridsome.server.js：

尝试 #3：修改 Express 配置

其他人似乎在修改 Gridsome 的开发服务器配置时遇到了类似的挑战。经过仔细检查，Gridsome 似乎使用Express而不是内部 webpack 开发服务器。嗬！如果您尝试配置正确的服务器，它会有所帮助。我试过gridsome.server.js这样修改：

虽然我可以确认这个函数运行了，但 Gridsome 的内部服务器配置似乎没有包含任何可以让这样的东西像我希望的那样工作的钩子。

其他信息、想法等

我在两个地方都尝试了函数样式和对象样式（如上面的示例）的 webpack 配置更改。当我启动开发服务器（即gridsome develop --host example.test）时，我可以通过使用标志让 Gridsome 识别我的主机。

我的直觉是，我正在尝试做的事情是不可能的。有人知道不同吗？谢谢！！！

我正在尝试对 Gridsome 的查询进行分页。

我得到的答案是显示我的前 10 个帖子，但它显示 totalPages 为 1。

我错过了什么？

谢谢。

我正在尝试为叠加层创建路线。在我的导航中按下按钮时会切换此叠加层。由于它的背景是透明/模糊的，它不能是一个单独的站点。

我的目标是让谷歌在我的站点地图上注册此路径，因此在其搜索结果中将其显示为站点链接。

我正在使用 Gridsome。

一个菜鸟问题：

当页面完全加载时，我试图跳转到页面底部。我该怎么做呢？

这是我未能在 Vue 中实现的纯 js 代码：

我已将 Buefy 轮播组件从https://buefy.org/documentation/carousel#carousel-list复制到我的 Gridsome 项目中。轮播以其提供的占位符图像正确显示。这些在 data() 段中的数组中，例如

现在我想要我的图像，而不是 Buefy 占位符。我找不到定位本地图像的正确方法。我尝试了很多东西，包括

我的尝试要么破坏轮播，要么在其中显示断开的链接。

Gridsome/Gatsby 用例：仅 CMS？

我读到 Gridsome/Gatsby 与 CMS 配合得很好，但我从来不需要对 CMS 做任何事情，这就是为什么我个人无法理解这种优势的原因。这是最好使用 Gridsome/Gatsby 的唯一情况吗？

静态站点生成和预取

都可以进行静态站点生成和预取。行为有什么不同吗？

灵活性

基本上使用 Nuxt/Next，我可以灵活地做我想做的事，并在我积极开发时轻松更改构建行为（SSR 或静态站点生成）。另一方面，Gridsome/Gatsby 没有提供灵活性。或者是吗？

时间投资

此外，考虑到时间，学习两个框架——嗯——非常耗时。因此 Nuxt/Next 可以让我覆盖更广泛的用例，并且更值得学习。至少根据我目前的知识，我是这么认为的。

当前的个人用例

在我的具体情况下，我想创建一个登录页面。理论上，从阅读文章来看，Gatsby/Gridsome听起来更合适。但是从功能上看，Nuxt/Next 与 Gridsome/Gatsby 相比，可以做到完全一样，没有任何缺点。

我正在尝试使用 Gridsome 和 Vue.js 进行相当大的网站转换。该网站需要能够从 API 加载数据。我一直在尝试遵循https://gridsome.org/docs/fetching-data/#import-from-apis上的说明- 我粘贴了示例代码。

但是，当我尝试运行 gridsome develop 时出现此错误

C:\projects\folder\project>gridsome 开发 Gridsome v0.6.9

正在初始化插件... Initialize - 0.97s TypeError: actions.addCollection is not a function at api.loadSource (C:\projects\VueJS-Research\my-gridsome-test-VS\gridsome.server.js:17:36)在 process._tickCallback (internal/process/next_tick.js:68:7)

作为 Vue.js 的新手，我不确定这里发生了什么。有我丢失的包裹吗？

我不得不说，如果遵循文档会导致这些问题，我可能不得不得出结论，Gridsome 还不够成熟，无法在商业环境中使用，我们可能不得不寻找其他地方。

任何帮助将不胜感激，谢谢。

gridsome.server.js 文件中的代码：

我的项目在开发模式下运行正常，但在构建模式下失败。完整的错误是

给我的唯一线索是模态插件。我读过这是因为客户端渲染，但不明白在这种情况下如何修复它。在main.js我导入并设置插件时：

我在vue文件中将它用作动态模式，因此当单击按钮时，模式是由导出字典中定义的方法创建的：

我是 Vue 的新手，任何帮助将不胜感激。