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 ，而且必须用 双花括号 获得已设置的信息等，如下：

利用dw软件，创建模板分为两类，一是新建，而是将现有文档保存为模板。在文档打开时选择“文件-另存为模板”命令，在d出的对话框中选择一个用来保存模板的站点，并在“另存为”文本框中为模板选个名字，点击保存即可。

---