将静态生成的网站连接到NUXT 3子路由

发布于 2025-02-13 07:54:14 字数 1320 浏览 0 评论 0原文

我在构建/SSG或SSR期间搜索将NUXT路线链接到静态生成的网站。

我的示例使用 histoire (基于组件的文档类似于Storybook)。 Histoire是在的基础上建立的。一切都是静态的。

我如何将此静态生成的网站连接到NUXT,例如可以从http:// localhost:3000/doc/stories在开发环境中找到。

来自Histoire的站点已经具有相对基础URL。

我有2种策略:

  1. (SSG)生成所有文件和路由,然后将它们放入“公共”文件夹中。
  2. 将VUE应用程序(HTML,JS,CSS)嵌入NUXT页面组件(pages/doc/stories)。我还不知道如何。

策略1:仅适用于基本URL,

我试图将生成的捆绑包放入public nuxt of nuxt of nuxt of nuxt app之前:
生成的.histoire/dist在构建NUXT之前,将其放入NUXT public/doc/code>目录中。 http:// localhost:3000/doc/stories/正在按预期运行。
但是,不可能直接访问故事。
为了表现出色, Meow演示组件无法在http:// localhost:3000/doc/story/story/components-atoms-meow-story-vue?variantid = _default。由于生成的站点是VUE应用程序,因此它返回404误差。

编辑: rfc可插入的儿童应用程序(multiapp)将实现嵌入多个nuxt应用程序。不计划它可以使用已经构建的应用程序。

I search to link a nuxt route to a static generated website during build/SSG or SSR.

My example uses Histoire (a component-based documentation similar to Storybook). Histoire is built under .histoire/dist with a index.html. Also everything is static.

How can I connect this static generated website to Nuxt, such as it is reachable from http://localhost:3000/doc/stories in dev environment.

The site from Histoire has already a relative base url.

I have 2 strategies:

  1. (SSG) Generate all the files and routes, then put them in the `public' folder.
  2. Embedding the vue app (html, js, css) into nuxt page component (pages/doc/stories). I don't know how yet.

Strategy 1: works only for the base URL

I tried to put the generated bundle into the public dir of nuxt before building the nuxt app as follow:
The generated .histoire/dist is placed into the nuxt public/doc/stories directory before building Nuxt. http://localhost:3000/doc/stories/ is running as expected.
However, it is not possible to access the stories directly.
For exemple, the meow demo component is not reachable at http://localhost:3000/doc/stories/story/components-atoms-meow-story-vue?variantId=_default. It returns a 404-error as the generated site is a vue app.

EDIT: An RFC pluggable child apps (multiapp) to embed multiple nuxt apps will be implemented. It is not planned that it can use already built app though.

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。
列表为空,暂无数据
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文