1.SSR服务端渲染
vue-server-renderer,即服务器端对Vue页面进行渲染生成html文件,然后将html页面传递给浏览器,
优点:
SEO不同域SPA的html只有一个无实际内容的html和app.js,SSR生成的html是有内容的,可以让搜索引擎能索引到页面内容;
更快内容到达时间 传统的SPA引用是将bundle.js从服务器获取,然后在客户端解析并挂载到dom。而SSR直接将HTML字符串传递给浏览器。大大加快了首屏加载时间。
1)服务端渲染优缺点:
优点:前端耗时少、有利于SEO、无需占用客户端资源、后端生成静态文件
缺点:不利于前后端分离、占用服务器资源
适用于应用交互不太复杂需要良好的SEO且服务器性能好
2)客户端渲染优缺点:
优点:有利于前后端分离、服务器压力小
缺点:前端响应慢、不利于SEO
适用于应用交互复杂且不需要良好的SEO,例如企业内部系统
1.2 预渲染
预渲染可以打包多页面并解决每个页面单独生成title描述关键词,切接口数据是在html生成之前放在页面上的,所以爬虫可以抓取到内容;
预渲染适合一个项目中有几个页面需要做seo优化时使用;
预渲染可以通过插件prerender-spa-plugin插件,在vue.config.js里进行配置来实现,如果需要修改title描述关键字的话,需要安装插件vue-meta-info,然后在页面组件中配置metaInfo,title,meta…
注:
1.预渲染无法配置动态路由
2.如果title描述关键词是来自接口的数据,那么来自metainfo的配置也是不行的
2.使用nuxt的原因
最主要的原因是SPA不利于搜索引擎SEO操作,所以我们需要将我们的应用在服务端渲染成适合搜索引擎抓取的页面,在下载到客户端。Nuxt.js适合做新闻、博客、电影、咨询这样的需要搜索引擎提供流量的项目。
3.nuxt.js的优点
基于Vue.js
自动代码分层
服务端渲染
强大的路由功能,支持异步数据
静态文件服务
ES2015+语法支持
打包和压缩JS和CSS
HTML头部标签管理
本地开发支持热加载
集成ESLint
支持各种样式预处理器:SASS、LESS、Stulus等等
支持HTTP/2推送
4.安装与使用
安装nuxt包 : npm install create-nuxt-app
创建项目: npx create-nuxt-app <项目名> 或 yarn create nuxt-app <项目名>
或 npm init nuxt-app <项目名>
5.目录结构
- assets 用于组织未编译的静态资源如LESS、SASS
- components 用于组织应用中的Vue.js组件(该目录下组件没有asyncData方法)
- layouts 用于组织应用的布局组件(比如自定义布局模板)
- middleware 用于存放应用的中间件
- pages 用于组织应用的路由与视图(Nuxt.js会读取该目录下所有的.vue文件并自动生成对应的路由配置)
- plugins 用于组织那些需要在根vue.js应用实例化前需要运行的JavaScript插件
- static 用于存放应用的静态文件(此类文件不会被nuxt.js调用webpack构建编译,服务器启动时,该目录会被映射到根路径/下,使用时~代表根路径 ~static)
- store 用于组织应用的vuex状态树文件(store下创建index.js即可激活配置)
- nuxt.config.js 个性化配置 用于覆盖默认配置
- package.json 描述依赖关系和对外暴露的脚本接口
6.路由
路由跳转推荐使用标签而不是a标签,属性为to
若是想要定义带参数的动态路由,需要创建对应的以_为前缀的vue文件或目录
嵌套路由: 添加一个vue文件,同时创建一个同名的文件夹存放子组件视图,在父组件(.vue)内写上
路由校验-validate方法:
validate({params}){
return /^\d+$/.test(params.id)
}
注意:Nuxt.js 会监听pages目录中的文件更改,因此在添加新页面时无需重新启动应用程序。
路由重定向
nuxt.config.js: router : { middleware : ‘redirect’}
创建文件夹middleware,其内添加redirec.js
redirect.js :
export default function ({
app,store,route,params,error,redirect
}) {
if(route.fullPath == ‘/原路径’)
return redirect(‘/重定向地址’)
}
7.过渡动画
设置全局过渡需要卸载assets/main.css里,同时配置一下nuxt.config.js里的css路径,
全局过渡样式以page开头,如果设置单一过渡,需要使用transition组件,同时规定好name,样式以name开头
8.异步数据
asyncData方法,该方法会在页面组件每次加载之前被调用。方法被调用的时候,第一个参数被设定为当前页面的上下文对象。
注意:此方法内无法通过this来引用组件实例对象,而且nuxt.js会将asyncData返回的数据融合组件data方法返回的数据一并返回给当前组件。
async asyncData({ params }) {
const { data } = await axios.get(https://my-api/posts/${params.id}
)
return { title: data.title }
}
fetch方法,用于在渲染页面前填充应用的store数据,与asyncData类似
9.配置端口IP
package.json里:
“config” : {
“nuxt”: {
“host”:”127.0.0.1”,
“port”:”8080”
}
}
10.生命周期
服务端:
nuxtServerInit —— 第一个运行的生命周期,可以设置token
middleware —— 可以做导航守卫(中间件),可以判断token是否存在
validate —— 参数校验
asyncData —— 异步请求,获取数据(只能在pages下的组件里使用)
fetch —— 操作store
服务端和客户端共有:beforeCreate created
客户端:同vue的生命周期 - 服务端不能使用localstorage和cookie的解决方案
安装插件 cookie-universal-nuxt 然后配置在nuxt.config.js的modules里,使用this.$cookies(get、set、remove) - head
全局配置的head卸载nuxt.config.js里,是一个对象;单独组件的head是一个函数,内部返回一个对象,配置项如title/meta写在其内 - 处理token
需要使用中间件 npm install cookie-universal-nuxt -S,可以先存储到vuex中,然后进行持久化存储
this.$cookies.set(‘token’,token) token通过请求获取; - 重定向
1)302重定向
使用中间件 创建redirect.js
nuxt.config.js中的router内 middleware : ‘recirect’;
在重定向的位置写redirect(‘新路径’),redirect可在生命周期函数的参数上解构出来
2)301重定向
需要安装插件 yarn add @nuxtjs/redirect-module
在nuxt.config.js的modules模块中将@nuxtjs/redirect-module添加进去
使用时在modules同级下写redirect,其类型为数组,里边放置每一条规则;
例: {from: ‘/news’, to : ‘/detail’ , statusCode : 301} 永久重定向跳转需要写上状态码301
15. seo优化之添加站点地图
yarn add @nuxtjs/sitemap
在nuxt.cofig.js的modules模块下添加 ‘@nuxtjs/sitemap’
静态情况下,在static目录下放入sitemap.xml;
动态生成时,项目目录下创建cofig目录,创建sitemap.js
再回到nuxt.config.js中, import sitemap from ‘./config/sitemap’,
配置 sitemap : sitemap
在项目根目录/sitemap.xml访问成功就说明配置完成;