我想在我的项目中使用一个stencil库。nuxt
我能够让它工作，但是当vue组件在服务器端呈现时，我只能让stencil's 组件在客户端呈现。
我认为最大的问题是defineCustomElement需要window作为参数。
我知道stencil.js有那个“prerender”，在我的理解中基本上是 SSR，我想和Nuxt.jsSSR 一样使用它。
所以我的问题是：如何配置nuxt项目以支持服务器端渲染stencil.js？
问问题
2119 次
3 回答
2
更新：我目前正在开发一个 Nuxt 模块以与基于 stencil.js 的库集成。
https://github.com/Gomah/nuxt-stencil
它能做什么：
render:route它使用&为基于 SSR 的应用程序（通用或构建时）创建两个钩子generate:page，它将在将请求发送回浏览器之前呈现模板组件。它为 CSR 注入一个插件，以从您的模板库中定义自定义元素，如此处所述。
⚠️ 注意：Vue 在 CSR 上 hydrating 时会抛出一些错误，这可能是由于渲染器在渲染模板组件时注入的注释
Stencil V1 之前的过时评论：
根据这条评论，看起来 Stencil v1 可能会解决 SSR ：
Stencil One 将使用 dist-hydra-script 输出目标来生成一个节点脚本，该脚本可用于水合您的脚本。然后生成的 dist/hydrate/index.js 脚本是您可以在许多地方重用的东西（Angular Universal、Express Middleware、自定义预渲染等）。
如果您正在预渲染，您只需将 --prerender 标志添加到您的模板构建中，它就会为您处理所有这些。我们仍在积极开展这项工作，并希望尽快发货。谢谢
Github 相关问题：
于 2019-04-26T03:59:16.463 回答
0
确实，您有一个解决方法
- 您必须在 unpkg 或任何其他公共（或私有）CDN 中发布您的 Web 组件
- 在您的 nuxt.config.js 文件中，在您的部分脚本中添加脚本。此脚本必须引用到您的公共库（https://stenciljs.com/docs/javascript）
有关如何向 nuxt 项目添加外部资源的更多信息，请阅读：https ://nuxtjs.org/faq/ -> 如何使用外部资源
干杯
于 2019-04-12T18:50:34.670 回答
0
哦，是的，正如 Aldarund 所说，你不能，我仔细查看了预渲染页面，据说预渲染发生在构建时，所以这是不可能的：/ 太糟糕了
于 2019-01-23T11:27:22.317 回答