将静态生成的网站连接到NUXT 3子路由
我在构建/SSG或SSR期间搜索将NUXT路线链接到静态生成的网站。
我的示例使用 histoire (基于组件的文档类似于Storybook)。 Histoire是在的基础上建立的。一切都是静态的。
我如何将此静态生成的网站连接到NUXT,例如可以从http:// localhost:3000/doc/stories
在开发环境中找到。
来自Histoire的站点已经具有相对基础URL。
我有2种策略:
- (SSG)生成所有文件和路由,然后将它们放入“公共”文件夹中。
- 将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:
- (SSG) Generate all the files and routes, then put them in the `public' folder.
- 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 技术交流群。

绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论