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

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

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

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

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

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

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

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

metinfo.cn/product/ 响应式网站模板，不妨到这一看。我喜欢用这个网站的原因是他的很多模板都是免费的，最主要的一点是，这个网站的页面非常的好看，对于我这个非常喜欢完美的人来说，这个网站满足了我对模板的需求。

---