网站的一部分可以是静态网站生成的，而另一部分是传统的水疗中心吗？答案

【问题标题】：Can part of a website be static site generated and the other be a traditional spa?网站的一部分可以是静态网站生成的，而另一部分是传统的水疗中心吗？
【发布时间】：2021-03-03 21:19:16
【问题描述】：

所以，我在 Nuxt 建立了一个网站并使用了 ssg。这很棒，但对于另一个网站，90% 的内容都是静态文本和图像，但我想要一个客户登录门户，他们可以在其中查看其产品的状态。以我的理解，我不明白这怎么可能是 ssg 。那么是否可以两者兼得？

【问题讨论】：

您的意思是：“并且使用过 SSR”？还是您的意思是： ssg 的“在服务器上生成”？
@kissu，对不起，我的意思是“由 ssg 在服务器上生成”

标签： vue.js nuxt.js single-page-application ssg static-site-generation

【解决方案1】：

Vue.js 被渲染成#app。该 div 之外的所有内容都是静态的。所以是的，你可以两者兼得。顺便说一句，如果您完全不需要 SPA，请检查 alphine.js，它是一种轻量级替代方案。

【讨论】：

您不能真正编写超出基本范围 (#app div) 的任何代码。至少以干净的方式。另外，当您已经拥有 JS 框架时，我不确定是否要引入 alpine。它通常仅在纯 HTML+CSS 上下文中使用。
你不能在#app之外写任何Vue代码，但是你可以写Vanilla JS。所以你可以两者兼得，而且它们可以非常清楚。 Alphine 不适合在 Vue 中使用，它是一种替代方案。如果您构建的页面包含 90% 的静态内容，那么使用任何大框架都不合逻辑。

【解决方案2】：

generate-exclude 配置可以帮助您避免访问 SSR 特定页面。

所以，假设我们有这个

export default {
  generate: {
    exclude: [
      /^\/admin/ // path starts with /admin
    ]
  }
}

它将 SSR 渲染除 admin 路径之外的所有内容，此路径仅可用作 SPA 生成的路由。

编辑回答 cmets

如果你有这种结构，admin下的所有嵌套路由都会被渲染为SPA页面。 blog 和 pricing 仍然是通用的（server + client 渲染）。

此外，一个简单的admin.vue 也可以完成这项工作（如果不需要更多路线）。

pages
--admin
----secure-dashboard.vue
----info.vue
--blog
--pricing

对于缓存，我不确定它的行为方式，但它应该仍然可以工作，因为它是浏览器端的。并不取决于渲染的类型。

【讨论】：

好的，我想我现在明白了。所以我可以在 Nuxt 应用程序的 pages 目录中有一个 admin.vue 文件，但它会被视为传统的 SPA，而不是如何处理带有缓存资产和 api 调用的 SSG 路由？