这是一个创建于 561 天前的主题，其中的信息可能已经有所发展或是发生改变。
中途参加了一个使用 Nuxtjs(v2.15.7)开发客户管理 APP 的团队，本人有 React/Nextjs 开发经验，一开始就是看看文档照猫画虎写点页面，稍微深入了解项目之后对于如何配置 Nuxtjs 渲染方式产生了一点疑问，求指点。
项目当前的情况：
-
nuxt.config.js内的相关配置为ssr: false, target: "static", generate: 未配置 - Docker 化时候用的是
npm run generate,启动命令npm start。并没有做只拷贝 dist 目录等减少镜像体积的优化，所有文件原封不动塞到镜像里然后部署到 K8s - 使用了动态路由(/post/_id),而且可以正常显示
想问一下这种情况下项目跑在何种模式下（ ssr,ssg,spa ）?
下面是问题发现的过程，有点长：
由于这个项目部署到 K8s 而不是 CDN ，最初我认为采用的是 SSR 模式。当时遇到个情况是每次 CI 在 build 阶段都要针对不同环境（ dev,test,prod...)生成多个镜像，差别只是环境变量不同。我想直接利用 runtimeConfig 把这些变量放到 pod 里的话 CI 做一个镜像就够了。但是尝试失败。
后来我看了 nuxtjs 配置文件，意识到我理解错了，项目采用的应该是 SSG 方式，确实看 generate 日志也是生成了每个页面的文件，静态文件的话当然是无法从环境读取变量，只有 build 阶段替换了。
再后来我发现另外一个开发人员使用了 dynamic route(/post/_id 这样的路由，id 是动态变化的，无法在 build 时从数据库获取，而且 generate 也没配，之前已经开发的部分没用过动态路由)。我想 SSG 模式下动态路由会被忽略不生成，我就提醒他说可能页面没法用。但是现实打脸，部署后可以正常访问。
于是我看了访问页面时返回的 html ，发现所有页面都只有一个id="__nuxt"节点，这种情况应该是 fallback 到 SPA 了吧，感觉是每个页面被单独做成了一个 SPA ？如果是这样的话 generate 就完全是多余的。
那么，npm start启动 Nuxt 服务器的时候到底是如何处理的？会检查已经 generate 好的文件吗？
第 1 条附言 · 2023-05-21 23:03:11 +08:00
好吧，看来这里人气不是很高。我又做了一些调查，同步一下结果。
关于三种渲染模式的配置：
- SPA模式：ssr: false （无需配置target，如果像我们这个项目一样配置target: static的话会有一些怪异的影响，后面细说），使用nuxt build构筑，构筑结果会出现在.nuxt目录下。虽然同时会生成dist目录但是启动时这个目录是不需要的，删除也没有影响。在.nuxt/dist/server下可以看到生成的spa文件index.spa.html
- SSR模式：ssr: true, target: server，使用nuxt build构筑，构筑结果会出现在.nuxt目录下。
- SSG模式：ssr: true, target: server，使用nuxt generate生成，生成结果会出现在dist目录下。
三个并列的模式选项为啥要用两个配置项控制我不能理解，玩排列组合了属于是。
关于启动命令nuxt start
在我们的项目配置情况下，nuxt start 确实是会检查dist目录是否存在，如果删除了dist启动会报错。但是它又不是简单地Host了dist目录，因为动态路由的页面是没有生成的。用其他工具比如http-server直接host dist目录的话访问动态路由会返回404。但是用nuxt start的话就可以正常访问。分析原因是nuxt在node_modules/.cache/nuxt下产生了一份build结果，其中有路由文件，nuxt start实际上是启动了这里的server.js，然后根据动态路由配置返回页面。进一步测试不删除整个dist而是删除下面的某一个页面文件，用nuxt start启动后发现其仍可访问，证明此时并没有host dist下的文件，而是完全由node_modules/.cache/nuxt下的build结果来处理请求。
我们项目配置存在的问题
对比了dist下生成的各个html文件，发现其内容都是完全一样的，整个项目里有200多个一样的index.html。这实在是太傻了。。。感觉是为了能从每个url都访问到同一个spa，所以copy了份。。。。 然后我还发现了这个issue似乎还没有解决的样子
结论
- 使用Nuxtjs的SPA渲染模式是只要设置ssr: false即可，不需要配置target: static
- 如果配置了ssr: false的话用nuxt build构筑，用nuxt start启动服务器。Nuxtjs似乎并不能生成比较好的单个SPA文件用于CDN部署。
- Nuxtjs的文档过于简略（v2.x)
 |
1
rocmax OP 结案，我去找管项目的聊聊。
|
Select Language