Vue SSR 项目 Nuxt.js 框架之《设置mate与定义化html模板》

Posted 2023-04-27

参考技术A 在做一些SEO的时候，一般会设置meta信息，或者做移动端项目的时候会设置一下视口等。我们一起看下在 nuxt 中如何设置 meta 和 head 内容的，以及如何定义化 html 模板。

重启后查看源码就可以看到我们设置的 head 信息了~~

页面个性化设置的时候，需要在页面里写入 head 函数并返回一个对象，如下：

这样就完成了每个页面的个性化的 meta 等一些 head 信息

每个页面的个性化设置 head 信息可以每个页面都写一个 head 函数去设置，但显得臃肿也不利于维护。我们可以在 plugins 的 mixins 文件里混入一个全局方法，每个页面去调用，以此来实现个性化的 meta 信息设置。

混入后，每个页面使用如下：

处理以上提到的设置 head 信息的方式，还可以通过定义化 html 模板来实现，但需要遵循nuxt的一些规则，比如：名称必须为 app.html ，而且必须用 双花括号 获得已设置的信息等，如下：

estssr和ssr的区别

estssr和ssr的区别

1、SSR（Server Side Rendering）是服务器端渲染，可以使用Node.js服务器渲染网页；

2、Nuxt.js是一个基于Vue.js的框架，提供了许多服务器端渲染的功能，基本上可以把Vue.js应用变成一个完整的应用程序；

3、Nuxt.js提供了一个非常强大的静态站点生成器，可以让你在构建时生成静态文件，可以在任何静态服务器上运行；

4、Nuxt.js也提供了SSR（Server Side Rendering）功能，可以让你在服务器端渲染Vue.js应用，从而让你的应用更快的加载。 参考技术A 根据我们的研究，ESTSSR和SSR的区别在于ESTSSR引入了更多的安全结构，拥有更严格的加密规则，能够更有效地隐藏用户的地理位置信息，提高了系统的安全性。