--- highlight: vs2015 theme: healer-readable --- ## 前言一直以来，所在公司的产品官网都是Spring MVC([thymeleaf模板](https://www.thymeleaf.org/))项目，前端用Idea打开java项目编写resources/template/xx.html文件，在另一个地方编写css、js等静态资源。平时上网注意到很多网站官网都基于Nuxt开发(Vue devtool会点亮Nuxt)，于是尝试Nuxt能否作为新的方案去落地公司/产品官网业务场景，关注它能实际带来什么；本文以开发一个游戏官网为需求，从Nuxt初始化项目开始，介绍Nuxt开发核心概念。第一部分描述Nuxt并理解它，第二部分Nuxt SSG游戏官网实践； github：预览地址： (基于vercel的SSR) （基于github page的SSG纯静态） ![image.png](https://p6-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/139a7081b21645f9a1f6e790033eaa73~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg6buR57695ZCM5a2m:q75.awebp?rk3s=f64ab15b&x-expires=1769557849&x-signature=JHAS%2BJ2MX8%2FF6QU4DVJ01cFbpZY%3D) ## 理解Nuxt ![Nuxt.jpg](https://p6-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/a733ad3ab4bf4da58633b4d7a0495e43~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg6buR57695ZCM5a2m:q75.awebp?rk3s=f64ab15b&x-expires=1769557849&x-signature=a4sJT%2FcFF%2B%2FgvH2tqyBkjgPYe80%3D) [nuxt官网](https://nuxt.com/) [nuxt中文官网](https://nuxt.com.cn/) 我们对Nuxt官网描述进行概括(去掉限定词)，得到一句话“*Nuxt是一个全栈Web应用和网站的开源框架*”，尝试引出Nuxt的核心内容： Nuxt中web全栈开发 = **前端开发** + **现代SSR**(水合) + **基于nodejs的服务端**开发可以认为Nuxt所有内容归于以上3个部分，这也是为什么Nuxt文档看起来有点杂多的原因；不得不说，Nuxt的胃口很大，它希望做到当你进行一个不仅限于前端开发(无论spa/ssr)，可能还需要服务端渲染，亦或是基于nodejs进行服务端开发，将以上都在一个名为Nuxt全栈框架中得到全部支持，并以一个项目作为整体来实现全部； ### Nuxt特性 Nuxt框架提供了大量特性给我们开发项目，可分为为**前端开发**提供的特性： * [基于文件目录(/pages)的自动路由](https://nuxt.com.cn/docs/guide/directory-structure/pages) * [自动导入component/utils/composables，支持拓展](https://nuxt.com.cn/docs/guide/concepts/auto-imports) * [vite(默认)/webpack双支持的，配置好的构建工具](https://nuxt.com.cn/docs/getting-started/configuration#vue%E9%85%8D%E7%BD%AE) * [TS支持](https://nuxt.com.cn/docs/guide/concepts/typescript) * ..... ![image.png](https://p6-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/f7810a1c2adc4f269d13efdc87d95e30~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg6buR57695ZCM5a2m:q75.awebp?rk3s=f64ab15b&x-expires=1769557849&x-signature=1zFRr3%2Bz2gZlBHRTFQwpAUQS8Cw%3D) 这部分特性其实都是Nuxt为前端开发作出的支持，本质上我们自己搭建的项目通过手动都能实现上述特性支持，所以不用太过关注，在官方文档了解后使用时再查即可；为**现代SSR**提供的特性： * [内置服务端渲染](https://nuxt.com.cn/docs/guide/concepts/rendering)（无需配置服务器与手动注入数据） * [useFetch 等相关数据获取](https://nuxt.com.cn/docs/getting-started/data-fetching) ![image.png](https://p6-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/88307d4c6e77491b92bc49c62dead0c7~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg6buR57695ZCM5a2m:q75.awebp?rk3s=f64ab15b&x-expires=1769557849&x-signature=zOZ%2BqIkeUdhREBTZQuIERjDb8wA%3D) 这部分特性是使用Nuxt SSR时必要工具，useFetch这个组合函数是核心为**基于nodejs服务**端提供的特性： * [支持 `/server` 目录编写API层与中间件](https://nuxt.com.cn/docs/getting-started/server)（基于Nitro服务器引擎） * nuxt前端开发部分可通过 `$fetch` 直接调用server下API ![image.png](https://p6-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/7079b3a2f6874bfb8847c06c2d62fe4f~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg6buR57695ZCM5a2m:q75.awebp?rk3s=f64ab15b&x-expires=1769557849&x-signature=%2Fj6lPlPixOmCB53fek0oawj7E%2FM%3D) 这部分特性是Nuxt创建的web应用添加服务端能力，本文不会过多涉及； **其它**特性： * SSG：静态网站生成，实现静态托管 ### 为什么使用Nuxt？不得不承认Nuxt确实做了很多，但我们必须思考并讨论目前需要它来干什么，以至于在开发中减少“我为什么要用使用它”的困惑，有以下4点： **基于nodejs服务端开发** 在Nuxt的`/server`目录可以为你的web应用编写API层和服务器处理程序(服务器路由/中间件)；由于Nuxt的web应用最终将部署在nodejs上(SSG除外)，那么Nuxt心想：*“都nodejs了，不得上服务端开发支持啊!”*； Nuxt服务端开发使用Nitro，从快速为web应用提供API支持来看是有可取之处，但如果需要完整的、独立的NodeJs服务端工程，显然**Express/Koa/NestJs**等更深入人心；况且在中小厂nodejs服务端开发场景较少，所以Nuxt这部分可以当做未来宏图吧，本文不过多涉及。 **服务端渲染** ![image.png](https://p6-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/b5cc6608fa254da3be98be7ff35cabab~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg6buR57695ZCM5a2m:q75.awebp?rk3s=f64ab15b&x-expires=1769557849&x-signature=b7ZPkWdZ%2BaHgIY4yVLbE5%2FPAjAE%3D) *SPA单页面应用？* 由于前端已经完全进入js驱动页面的动态内容，vue/react让我们无需手动js操作dom更新界面，我们通过一个入口文件(main.js/ts)将任意模块集成到单个index.html，配合前端路由(router)实现SPA应用； SPA最大特点是无需刷新/无重载页面，高度交互/动态，以此衍生很多优点...... *SSR服务端渲染？* SPA应用的界面最终是在客户端即浏览器生成并渲染的(CSR)，SSR即服务端生成(组装)好完整html页面内容响应到客户端，浏览器直接展示即可；它并不是Nuxt/Next带来的概念，不存在SPA和SSR谁比谁高级的说法，**传统SSR**本身就比SPA具备2大优点(当然也有不足于spa处)： 1. SEO(搜索引擎可抓取) 2. 客户端首次加载速度快/白屏短(首屏渲染无需等待大量js加载与执行) *现代SSR！* Nuxt中提出[**通用渲染**](https://nuxt.com.cn/docs/guide/concepts/rendering#%E9%80%9A%E7%94%A8%E6%B8%B2%E6%9F%93)的SSR模式，简单来说就是以URL静态页面路径访问web应用时(location)，页面内容来自是服务端某个时间生成并渲染的结果，这使得页面可被SEO；在html页面在浏览器展示后，支持用户点击切换页面等交互，表现为SPA方式以js更新界面(而不是传统ssr加载新页面)，使SSR返回的静态页面在浏览器同样具有高交互性； Nuxt通过让浏览器加载完整html时，在执行js中实现一个**水合**的过程，使页面内容可动态；也就是我们在vue源码中经常见到的单词 `hydrating` 相关，此时页面交互表现和spa相同。 **前端项目模板** 我们完全可以不使用Nuxt的服务端开发和SSR能力，把它当做一个前端项目开发模板，它本身具备规范化内容，如预定义了不同作用的项目[目录结构](https://nuxt.com.cn/docs/guide/directory-structure/nuxt)值得参考学习，以及[plugins](https://nuxt.com.cn/docs/guide/directory-structure/plugins)/[modules](https://nuxt.com.cn/docs/guide/directory-structure/modules)拓展应用/项目的能力；这使得团队可以通过一行 `npx nuxi@latest init ` 创建一个标准nuxt项目，团队对项目能力支持统一查阅nuxt官方文档；唯一弊端是需要自动摒弃文档上SSR相关的内容(不相干)，并在nuxt配置中设置`ssr: false`关闭ssr改用客户端渲染；最终同样通过`npm run build`构建出SPA页面。 **SSG** SSG(静态站点生成) ：在构建阶段将网站的页面预渲染为纯静态 HTML 文件，用户访问时直接返回这些静态文件。简单来说，ssr是每个页面都是在服务端生成并返回的，SSG是在构建时就生成固定的html页面，相当于执行一次ssr渲染结果作为静态页，可直接作为纯静态资源托管部署；与ssr相比： * 同样返回最终html文件，支持SEO * 不需要ssr的基于nodejs服务器 * 页面数据/内容在生成时固化，不如ssr更加动态 * 无需服务端渲染，加载快，且无服务器压力 * 页面同样会在浏览器水合通过Nuxt SSG 做到使用vue开发的页面，通过预渲染构建生成可被SEO的html页面(每个路由对应一个)；整个过程**纯前端**，适用于页面内容**不需频繁更新**的情况，我认为在部分官网开发的场景很契合，本文将对该部分具体实践； *实现动态内容的SSG！* 如何最大化实现SSG动态内容能力？SSG是预渲染好的页面，这注定了SSG页面内容的更新都需要一次构建并部署(上传静态资源即可)；对于内容需更新的官网，我们开发一个简单的CMS内容管理系统(支持运营人员修改官网内容的后台)，将动态内容的数据保存在数据库；假设是ssr页面，你只需要开发页面时编写*调用对应接口获取后台配置的内容数据*，一旦部署后页面每次**访问时**将调用接口，返回最新内容页面；对于SSG页面，同样你只需要开发页面时编写*调用对应接口获取后台配置的内容数据*，Nuxt**SSG构建时**将调用接口，将返回数据作为此次生成的页面内容，因此每次运营人员后台修改完，需要重新构建并上传静态资源(或者运营人员保存时调用CI/CD的API自动构建并上传资源)； ## Nuxt官网实践本项目参考了以下游戏/公司官网（设计，交互，内容）：腾讯游戏：大梦龙途：王者国际服： [lol角色渲染图素材](https://www.deviantart.com/sineerie/gallery/62273611/renders) ### 创建Nuxt项目 ```shell npx nuxi@latest init nuxt-tgame-web ``` ### layouts布局大部分企业/公司官网下每个页面都有相同的页头(header/nav)页尾(footer)等： ![微信截图\_20241222172948.png](https://p6-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/64813533fa9e45aa86a612425e12e1a9~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg6buR57695ZCM5a2m:q75.awebp?rk3s=f64ab15b&x-expires=1769557849&x-signature=E6Vz1Z2c9M3Ktm9VW%2BQolxv9PgY%3D) ![微信截图\_20241222172926.png](https://p6-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/a84bdc2c662e4cc4b5b6053deacac31d~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg6buR57695ZCM5a2m:q75.awebp?rk3s=f64ab15b&x-expires=1769557849&x-signature=HSnJDksR%2FQJiOWrC1hW7c73IfMI%3D) ![微信截图\_20241222173003.png](https://p6-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/7c301c329ffa49ccace902a68af61c00~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg6buR57695ZCM5a2m:q75.awebp?rk3s=f64ab15b&x-expires=1769557849&x-signature=7KkY5c3DYYDEpGiUw0pb0ZU69hs%3D) ![微信截图\_20241222172857.png](https://p6-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/adb7a25539264dde90dc352f4220848b~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg6buR57695ZCM5a2m:q75.awebp?rk3s=f64ab15b&x-expires=1769557849&x-signature=Hiaxek5brlxEnQPj0xecCQ2nx8c%3D) 编写页面基本结构所需要的Header/Footer组件，将他们作为[Nuxt Layouts](https://nuxt.com.cn/docs/guide/directory-structure/layouts)可重用布局的内容(类似admin项目的header/sidebar部分)，代码见[nuxt-tgame-web/layouts](https://github.com/KID-1912/Nuxt-start/tree/master/layouts) **默认布局** 定义一个 `/layouts/default.vue` 默认布局文件，作为整个官网vue页面共同的界面： ```html // /layouts/default.vue ``` **使用布局** 在 `/app.vue` 中使用 [NuxtLayout](https://nuxt.com.cn/docs/guide/directory-structure/layouts#%E5%90%AF%E7%94%A8%E5%B8%83%E5%B1%80) 内置组件包裹路由，**NuxtLayout**将自动引入并解析 `/lauyouts` 目录下布局界面 ```html // /app.vue ``` **Nuxt Layouts**额外提供了强大的自定义多布局和动态切换布局能力，更多能力见[layouts](https://nuxt.com.cn/docs/guide/directory-structure/layouts#%E9%BB%98%E8%AE%A4%E5%B8%83%E5%B1%80) **覆盖布局** 为Nuxt项目提供了布局后，所有pages下的页面都将使用layouts下某个布局，你可以通过在页面(/pages/\*.vue)下 `definePageMeta` 传递 `layout: false`，对当前页面关闭布局，然后在此基础上支持自定义布局，如我的 [`/home/index.vue`](https://github.com/KID-1912/Nuxt-start/blob/master/pages/home/index.vue) 由于需要自定义Footer样式，在页面代码关闭全部布局后覆写页面布局；覆盖布局具体使用见[在每个页面覆写布局](https://nuxt.com.cn/docs/guide/directory-structure/layouts#%E5%9C%A8%E6%AF%8F%E4%B8%AA%E9%A1%B5%E9%9D%A2%E4%B8%8A%E8%A6%86%E7%9B%96%E5%B8%83%E5%B1%80) ### 页面与路由 Nuxt规定所有页面的视图文件以 `/pages/**/\*.vue` 存放在pages目录，并且默认Nuxt会自动根据pages目录结构生成vue页面路由，我们只需在app.vue声明路由 ```html // /app.vue ``` 完整Nuxt页面&路由规则见 [目录结构 pages](https://nuxt.com.cn/docs/guide/directory-structure/pages) **覆写/自定义路由** ![image.png](https://p6-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/30b41859f78f4d7fad9e6e9e05d4a77d~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg6buR57695ZCM5a2m:q75.awebp?rk3s=f64ab15b&x-expires=1769557849&x-signature=7gKjaQ5QVNTiN4fZnhkMdSJnjOM%3D) 按照Nuxt页面/路由规则，我的官网pages目录结构应该是： * news/index.vue：新闻资讯页 * product/index.vue：产品页 * index.vue 首页(根路径页面) Nuxt会将pages下每个子目录的index.vue/ts/tsx等尝试解析为路由页面，并按照子目录路径与名称生成路由但实际在我的官网实践，pages目录结构是： * home/index.vue：首页 * news/index.vue：新闻资讯页 * product.index.vue：产品页 * index.vue 根路径页面(引入home/index.vue作为内容) 这是因为我关闭或者说覆写了Nuxt默认生成的路由，原因如下： 1. Nuxt中pages目录下所有目录与文件都会被尝试解析为路由，如果你为页面子目录新增components也会被解析为路由，这要求我们在pages目录不能存放非页面模块； 2. Nuxt SSG构建时也最遵循默认目录解析为路由的规则，pages下非页面内容很可能导致构建时的意外错误；为了让pages目录内容自由化，通过手动声明Nuxt页面路由，实现对默认[生成路由的覆写](https://nuxt.com.cn/docs/guide/directory-structure/pages#%E8%87%AA%E5%AE%9A%E4%B9%89%E8%B7%AF%E7%94%B1)： ```js // /app/router.options.ts import type { RouterConfig } from '@nuxt/schema' export default { routes: (_routes) => [ { path: "/", component: () => import("~/pages/index.vue"), meta: { layout: false } // 取代definePageMetaData }, { path: "/news", component: () => import("~/pages/news/index.vue"), }, { path: "/product", component: () => import("~/pages/product/index.vue"), }, ], } satisfies RouterConfig ``` 注：当你自定义路由后，页面中类似definePageMetaData等方法将不再生效，需要手动指定 **路由跳转** Nuxt中路由跳转，我们官网实践中主要通过NuxtLink内置组件导航到其它页，它将被渲染为a标签(SEO) ```html

首页

产品信息