中恒智造官网 — 速记版

项目时间：2022年7月 - 2022年9月 | 已上线运营 技术栈：Nuxt2 + Vue2 + ElementUI + JSEncrypt + AOS + ECharts + vue-baidu-map + v-viewer + cheerio + nuxt-precompress 一句话定位：企业 B2B 官网——9 大产品线展示 + 注册登录 + 试用申请 + SEO。

📋 速记表（面试前快速扫）

题	一句话结论	关键词
Q1	Nuxt2 为 SEO + 静态部署，extendRoutes 加 index.html	SEO 静态部署
Q2	gzip/brotli 预压 + 去 console + optipng 压图	预压缩 去console
Q3	Cheerio 构建期清 SSR 冗余属性	Cheerio 构建期
Q4	JSEncrypt RSA + encryptlong 分段加密	RSA 分段
Q5	注册登录 + token 拦截器 + 试用申请工作流	token拦截器 试用流
Q6	五档断点 + v-ellipsis 真溢出才挂事件	五档 v-ellipsis
Q7	query 动态路由装 9 产品独立组件	query路由 9组件
Q8	百度地图+viewer+AOS=rAF 轮播	集成 rAF轮播

---

Q1: Nuxt2 SSR → 静态站点生成

面试官可能问：为什么选 Nuxt2？静态站点怎么生成？

🗣️ 口述稿：

三个原因：SEO（B2B 官网要被收录，SSR 服务端渲染完整 HTML）、静态部署（内容更新低频，target:static + npm run generate 出纯静态文件丢 Nginx html 目录，不用养 Node 进程）、2022 年 Vue2 生态成熟。

💡 关键词提示：SEO target:static 免运维

⚠️ 备注：

• 细节加分：router.extendRoutes 给每个路由加 /index.html 别名，兼容老旧 Nginx 对目录路径的处理
• 为什么不是 Nuxt3：2022.7 Nuxt3 还在 RC、Element Plus 适配不齐，稳定性优先。别说成落后

追问①：SSR 和纯 SPA 对 SEO 本质差别？

SPA 是 JS 渲染、老爬虫拿不到 DOM；SSR/generate 服务端就产出完整 HTML，不用执行 JS 就能读正文。这是选 Nuxt2 根因。

追问②：static 和实时 SSR 什么区别？

static 是构建时预渲染每路由 HTML，已覆盖 SEO + 免运维；SSR 是实时 Node 渲染。别把两者混淆。

---

Q2: 首屏性能优化（真实实现）

面试官可能问：首屏从 5.87s 到 1.16s 怎么做的？

🗣️ 口述稿：

四层：① gzip/brotli 预压缩（nuxt-precompress 构建期生成 .gz/.br，gzip level9/brotli level11，Nginx gzip_static 优先返 brotli）；② 生产去 console（transform-remove-console）；③ 图片压缩（imagemin-optipng）；④ 原本的 webpack 代码分割思路（但那段注释态，如实际说）。

💡 关键词提示：预压缩 去console optipng

⚠️ 备注：

• 最硬的点：把"运行时实时压"变"构建期就压好直接返"，省 CPU 又加速，是真做了且能讲深
• [重要修正] splitChunks / compression-webpack-plugin 在 nuxt.config.js 是注释掉的，别把"webpack 代码分割生效"讲成当下在用的
• 也别包装"PNG 全转 webp 省60-70%"——仓库没有坐实，就讲 optipng 压 PNG

追问①：5.87→1.16 用啥测的？能复现吗？

[需自行确认] 仓库没 Lighthouse 报告/埋点。是 DevTools 粗值、没有每项贡献拆分。被问"每项贡献多少"如实说没拆分记录，别硬报。预压缩收益真实，但"80%"更像宣传口径。

追问②：图片这块具体压了什么？

package.json 有 imagemin-optipng（PNG 无损压缩），图片主要走这道。别加没依据的 webp 转换数字。

---

Q3: SEO 优化 + Cheerio 清冗余标签

面试官可能问：Nuxt SSR 输出有什么问题？怎么清？

🗣️ 口述稿：

Nuxt SSR 在 HTML 上贴一堆渲染属性（data-n-head-ssr / data-hid / data-vue-ssr-id / data-server-rendered），占体积、影响 SEO、一眼看出是 Vue SSR。我在 hooks.generate.page 用 Cheerio 遍历 DOM、批量 removeAttr 清掉再写回。

💡 关键词提示：hooks.generate.page Cheerio removeAttr

⚠️ 备注：

• 技术选型：hooks.generate.page 只在构建期触发（非运行时）、Cheerio 不执行 JS 纯 HTML 操作，比 Puppeteer 轻几个量级。把"构建期 + Cheerio 而非运行时/非 Puppeteer"讲清含金量最高

追问①：为什么构建期不运行时拦？

静态生成 HTML 已定，构建时一次洗干净运行时零开销；运行时每个响应都要处理有性能成本。

追问②：Cheerio 和 jsdom 区别？

jsdom 实现完整 DOM 生态、慢；Cheerio 只做解析+查询+修改 HTML 字符串、jQuery 风格很快。官网只洗字符串 Cheerio 够用。

---

Q4: RSA 非对称加密全链路

面试官可能问：为什么官网用 RSA？怎么用？

🗣️ 口述稿：

保护注册/登录/密码重置的敏感信息传输，用 JSEncrypt 做 RSA。短文本用 JSEncrypt；RSA-1024 有长度上限（117字节），超长配合 encryptlong 分段加密。封装 plugins/rsa.js 挂 $RSA，组件里 $RSA.encrypt(password) 直接调。

💡 关键词提示：JSEncrypt encryptlong分段 $RSA

⚠️ 备注：

• 加分点：RSA 公钥写前端没关系（公钥本公开），安全靠私钥在后端；真正风险是 MITM 换公钥，要 HTTPS+HSTS 保传输层。讲出"懂原理"而非"会用库"

追问①：RSA 和 HTTPS 都用吗？

纵深防御：TLS 保链路、应用层再叠层密码加密双保险。不是替代 HTTPS 是叠加。

追问②：分段加密怎么不破坏整体性？

分段分别加密后拼接、解密按同分段，配合完整性校验。要点是绕过长度限制但整体性要自己管。

---

Q5: 用户账户体系与试用申请工作流

面试官可能问：用户系统和试用申请怎么设计？

🗣️ 口述稿：

账户体系含注册/登录/密码重置/实名认证。登录后端返 token 存 localStorage，Axios 拦截器统一在 config.headers.token 注入；middleware/account-authentication.js 做页面级权限（未登录跳登录页）。试用申请是工作流：点申请 → 填企业/姓名/联系方式+校验 → POST /api/userInfo/commitUserInfo → 销售跟进。

💡 关键词提示：token拦截器 middleware 试用工作流

⚠️ 备注：

• 讲业务动机：B2B 实名认证确保销售线索真实、只给真实企业开放试用，比背接口名强
• [需自行确认] token 放 localStorage 有 XSS 风险，敢于自暴弱点：更稳是 Cookie+HttpOnly+CSRF，当时直接存 localStorage 是可改进点

追问①：token 放 localStorage 安全吗？

有 XSS 风险，是最大问题。更稳是 Cookie+HttpOnly+CSRF。承认当时直接 localstorage 是可改进点，敢自暴露是加分。

追问②：Axios 拦截器统一做了什么？

请求拦截 JSON 序列化 + 注入 token；响应拦截统一处理 400/401/403/404/500。标准但"统一收口"的习惯要能讲出来。

---

Q6: 五档响应式断点 + v-ellipsis 指令

面试官可能问：响应式怎么做？有什么特殊指令？

🗣️ 口述稿：

五档断点（>1920 / 1280-1920 / 1000-1280 / 600-1000 / <600），SCSS 变量统一管理间距 + 原生 Media Query + Grid，移动端换汉堡滑入毛玻璃 Drawer。v-ellipsis：先 CSS 三件套截断，scrollWidth>offsetWidth 判断真溢出才绑 hover tooltip，不溢出不建 DOM。

💡 关键词提示：五档断点 v-ellipsis 真溢出才挂事件

⚠️ 备注：

• v-ellipsis 最值得讲"只有内容真超了才挂事件"的性能取舍，tooltip 方向按鼠标位置判断避免出视口

追问①：为什么拆五档不用 Bootstrap 栅格？

B2B 官网设计稿高度定制，每模块不同尺寸布局差异大（桌面4列/平板2x2/手机2列），不是 col-md-6 能 cover，原生 Media Query+Grid 更灵活。

追问②：resize 时高度/动画怎么适配？

clientWidth 实时取算 carouselHeight 响应式 banner 高度、AOS 动画方向随屏宽变。响应式不纯 CSS 还夹 JS 动态计算。

---

Q7: 九大产品线动态路由

面试官可能问：九个产品详情怎么组织？

🗣️ 口述稿：

URL query 动态路由 /product/details?type=1..9。details.vue 用 product 对象映射 9 个产品、computed 按 $route.query.type 取当前值、模板 v-if/else 装对应子组件，底部"预约现场演示"→ 弹试用申请。

💡 关键词提示：query动态路由 product映射 v-if/else

⚠️ 备注：

• 为什么 query 不 /product/:id：产品数固定 9 个不用配 generate.routes 动态生成，静态更省事且每产品独立页利于 SEO

追问①：产品未来动态增删这方案成立吗？

不成立——产品一动态就改接口拉列表 + 动态路由 + generate.routes 生成。当前固定用简单方案、未来动态要升级，方案跟数据形态走。

---

Q8: 第三方集成与交互细节

面试官可能问：集成了哪些第三方？有什么交互细节？

🗣️ 口述稿：

集成 vue-baidu-map（北京/广州双点位+路况）、v-viewer（资质证书预览，封装 this.$viewerApi）、百度统计+51la 埋点、AOS 滚动动画、背景粒子 Canvas。最能讲的交互是资质证书 requestAnimationFrame 焦点缩放无限轮播——横向滚、悬浮暂停+放大、越界重置无限循环。

💡 关键词提示：vue-baidu-map AOS rAF无限轮播

⚠️ 备注：

• 收敛到一个能讲的交互（rAF 轮播为什么不用 setInterval），别各第三方平均用力变功能罗列
• AOS 依赖 window 要 ssr:false，Nuxt2 常见坑一句带过
• [需自行确认] "duration:700, easing:'ease-out-cubic'" 这类参数按代码确认别背死

追问①：为什么 AOS 要 ssr:false？

AOS 依赖 DOM+window，mounted 里 AOS.init()、isDone 等数据到位再渲染，SSR 不上它避免报错。

追问②：埋点哪种要防误收集？

百度统计护航核心转化即可，另一家可选，别为堆数据塞第三方脚本拖首屏。埋点能少则少。

---

🎙️ 行为面试

为什么做这个项目？

公司官网之前是 WordPress 模板站，慢、不好维护、不支持定制。老板要自主可控、能展示 9 大产品线、支持注册+试用申请、SEO 好。我从 0 搭 Nuxt2 静态站独立完成前端。

💡 关键词：替代WordPress 自主可控 独立完成

最大难点？

1. gzip/brotli 预压缩的 Nginx 配置——生成的 .gz/.br 要让 Nginx gzip_static on 优先返 brotli、低版本还要编译模块，查文档+改 nginx.conf 花了时间
2. IE11 兼容——工厂客户用 IE11，Nuxt2 默认不转译 node_modules 的 Element UI，build.transpile 强制转译解白屏

💡 关键词：预压缩Nginx IE11转译

遗憾/弯路？

1. 全程纯 JS 没 TS——重做会直接上 TypeScript 或 Nuxt3
2. 没有 CI/CD——部署手动 generate + 手动上传，该配 GitHub Actions
3. 样式变量管理晚一步——前期写死颜色后来才抽 _variables.scss，老页面没完全迁移；"5.87→1.16"只留在宣传口径没落成长期监控、现在无法复核

💡 关键词：无TS 无CI/CD 无性能监控

怎么跟设计协作？

设计出 PSD 我切图写页面。没组件库约束，我抽了通用组件（common-banner/header/footer/applyForTrial/rightSideBar），20+ 页共用。工程习惯但别说是某组件库。

[需自行确认]：3D倾斜+聚光灯、毛玻璃 等交互是否真在 nuxt-website 仓库，按提交/代码确认再讲。

---

🃏 极简速记卡（面试前5分钟看）

• Q1 选型：SEO+静态部署，extendRoutes加index
• Q2 优化：预压缩+去console+optipng
• Q3 SEO：Cheerio构建期清冗余属性
• Q4 加密：JSEncrypt RSA+分段
• Q5 账户：token拦截器+试用工作流
• Q6 响应式：五档断点+v-ellipsis真溢出
• Q7 路由：query动态装9产品
• Q8 集成：百度地图+AOS+rAF轮播
• 行为 动机：替代WordPress；难点：预压缩Nginx+IE11；遗憾：无TS+无CI

上一篇：08-EMI云数据平台 回到首页：README