没有 SSR 的 Vuestorefront - 未触发 asyncData答案

【问题标题】：Vuestorefront without SSR - asyncData not triggered没有 SSR 的 Vuestorefront - 未触发 asyncData
【发布时间】：2021-03-04 08:13:50
【问题描述】：

我对 Vuestorefront 重建的体验非常糟糕，因为代码的每次更改大约需要 25 秒。所以我决定关闭 SSR（用于开发），现在大约需要 3-4 秒！ ...但是现在 VueJs 生命周期存在问题。

我用什么

Vuestorefront 官方仓库：https://github.com/vuestorefront/vue-storefront

Storefront 安装有：纱线、演示 API、SSR 端点和默认主题。一切正常，但开发速度很慢。

优化Webpack配置：https://github.com/yireo-training/vsf1-local-webpack

按照自述文件中的教程一切正常，代码的每次更改都在 4 秒内构建。成功构建会自动刷新网站，热重载。

有什么问题？

我无法直接打开任何链接（指向产品、类别等的链接），也无法刷新/重新加载任何页面

我发现在这些情况下是跳过函数asyncData 预加载数据。例如产品页面：https://github.com/vuestorefront/vsf-default/blob/master/pages/Product.vue#L334 当我从主页单击产品详细信息时，会触发功能 asyncData 并且产品页面已正确加载但刷新 (F5) 是 asyncData 跳过。

重新加载后的产品页面：

我尝试将代码从 asyncData 重新实现为方法 beforeCreated，但它仍然不起作用。

我的问题

如何强制调用函数asyncData？

...或者有没有办法重新配置 Webpack 以使其工作？

...或者还有其他方法可以更快地重建 vuestorefront 吗？

【问题讨论】：

标签： vue.js webpack nuxt.js webpack-dev-server vue-storefront

【解决方案1】：

感谢您试用我的 Webpack 配置。请注意，它远非完美，需要多方协作才能使其适用于所有情况。

正如你已经在代码中看到的：Vue 元插件使用metaInfo 方法来提供标签。 Product 组件再次调用可计算的 getCurrentProduct 可计算的，它再次调用 Vuex getter product/getCurrentProduct。同样，这需要执行 asyncData() 方法，以便从 ElasticSearch 或 GraphQL 加载数据。

asyncData() 通常要么在浏览器中异步执行（呃！），要么在 SSR 工作时在服务器上同步执行。这意味着在默认的 VSF1 情况下，调用 this.getCurrentProduct.meta_title（在 metaInfo 方法中）永远不会失败，因为它将依赖于之前已经同步加载的 Vuex 中的某些内容。但是，如果没有 SSR，这会导致代码问题，因为 Vuex 存储将在 metaInfo 标签执行后被填充。因此，重写metaInfo 方法可能更有意义，如下所示：

metaInfo () {
    const storeView = currentStoreView()
    return {
      title: this.getCurrentProduct && htmlDecode(this.getCurrentProduct.meta_title || this.getCurrentProduct.name),
      meta: (this.getCurrentProduct && this.getCurrentProduct.meta_description) ? [{ vmid: 'description', name: 'description', content: htmlDecode(this.getCurrentProduct.meta_description) }] : []
    }

我自己没有尝试过这段代码，但希望它有意义。这将证明默认主题中提供的许多组件（无论如何您都将对其进行自定义，对吗？）仅考虑 SSR 编写（这对我来说很有意义）。

正如您所说，另一种尝试可能是对每个组件执行asyncData。 core/client-entry.js 文件（也是我的 Webpack 配置的一部分）已经包含了这方面的工作 - 只需扫描代码中的单词 asyncData。也许您可以切换配置选项executeMixedinAsyncData 看看这是否会改变一些事情？

【讨论】：

非常感谢您的帮助。文件core/client-entry.js 是解决方案。我评论了这一行：github.com/vuestorefront/vue-storefront/blob/master/core/…，它就像一个魅力！
很高兴听到。似乎通过注释该行执行了更多代码 - 不仅是asyncData 位，还有路由等。我会在未来的某个时间尝试研究这个问题，看看是否可以这样做以更聪明的方式。但忙于两者之间的生活:)

【解决方案2】：

找到了解决方法，现在热重载大约需要 2 秒。您可以查看我的拉取请求。

https://github.com/vuestorefront/vue-storefront/pull/5560

它根本没有禁用 SSR，那么问题的根本原因是什么？在主 Webpack 进程中进行类型检查，因此基本上通过将其移至另一个进程，它的编译速度会快很多。

本质上，通过将transpileOnly: true 传递给 ts-loader，它会禁用类型检查，并且通过使用 fork-ts-checker，它只会在您的开发环境中的一个单独进程中工作，因此您可以从 TS 中获得最大的好处.

对于该实施，我基本上遵循了 Webpack docs and installed the fork-ts-checker plugin 的建议。

告诉我它是怎么回事，就我而言，它大大提高了我的工作效率:)。

【讨论】：