Vue的SSR——nuxt

Nuxt 基础

概念

spa首屏慢,seo不友好。传统的服务端渲染,组件复用传值比较麻烦。最好 Vue 和 ssr 结合。

ssr 服务端渲染 server side render 直接在服务端层获取数据,渲染出完成的 HTML 文件,直接返回给用户浏览器访问。

vue官方有一个指导文档,通读下来觉得要实践的地方较多,没有跟上。这里介绍独立的 nuxt 。

nuxt可以做spa,也可以做ssr,也可以静态化。

大致的思路: 客户端请求 – 服务端收到请求 – 中间件 – 校验 – asyncData fetch – render – 客户端。

约定优于配置,所以目录结构很重要,一般不修改。

创建项目时候使用的是 npx create-nuxt-app app-name 这里没有全局安装组件,本质上是线上拉取一个模板到本地,然后进行安装。好处是流程走 npm-script ,版本最新不落后。

目录结构

1
2
3
4
5
6
7
8
9
├── .nuxt # 自动生成的真正的入口文件
├── layouts # 模板。
├── pages # 页面文件。路径+文件名就是路由。
├── store # 全局数据流 vuex
├── assets # 静态资源文件 less js 等
├── static # 不参与编译的静态资源
├── middleware # 中间件
├── plugins # 插件
├── nuxt.config.js # 唯一配置文件

页面路由

自动路由。假定 存在 pages/home.Vuepages/index.Vue ,会自动生成 //home

动态路由。如果是参数路由 /pages/viedeos/_id.Vue 所有 /video/* 的会指向这个模板,内部可以通过 $router.params.id 获取

路由嵌套。存在 pages/videos.Vuepages/videos/index.Vue 外层生效。外层可以通过 <nuxt-child> 获得内部元素

layouts 模板。在某个pages/a.Vue

1
2
3
export default {
layout:"videos" // 自定义模板
};

路由切换使用 nuxt-link 路由地图在 .nuxt/router.js

asyncData

插件一般是 @nextjs/axios 方便统一。
异步函数请求的数据会变成 vue的data,可以替代 data。 这个是实践的重点
功能是在页面组件中。

第一个参数是上下文。在组价初始化之前被调用,所以拿不到js里的示例对象

上下文
在服务端调用 asyncData 可以使用 req res

在任何 Vue 组件的生命周期内, 只有 beforeCreate 和 created 这两个方法会在 客户端和服务端被调用。其他生命周期函数仅在客户端被调用。

meta

在vue文件里始终可以定义 head信息,这对seo很有好处

1
2
3
4
5
6
7
8
9
10
export default {
header() {
return {
title:"",
meta: {
charset:"utf-8"
}
};
}
};

vuex

别名

默认提供两个别名 ~表示src目录

~/assets/a.jpg~/static/a.jpg

配置

我们通过 nuxt.config.js 来覆盖默认配置。

– build 打包时候 vendor 添加模块
—- analyze 打包后可视化打包文件,方便优化
—- babel 默认提供了babel配置。客户端id9 一般不用改
—- cache 是否启用缓存。 terser-webpack-plugin cache-loader
—- crossorigin 是否给html添加这个属性
—- cssSourceMap 开发模式开启,生产模式关闭
—- devMiddleware 参考 webpack-dev-middleware
—- devtools 是否允许 Vue-devtools 调试 关注这里。
—- extend 服务端打包构建,客户端打包构建
—- extractCSS 默认false 这个可以关注一下
—- filenames 自定义打包名 关注
—- friendlyErrors 默认开启 报错时候红色 白色 绿色区分
—- hardSource
—- hotMiddleware
—- html.minify 关注。是否压缩混淆
—- loaders 自定义webpack加载器 也可以在 build.extend 修改
—- optimization 优化项。webpack的optimization
—- terser 不太理解 webpack-terser
—- optimizeCSS webpack 的插件
—-parallel 打包时候开启 thread-loader
—- plugins 配置插件
—- postcss 可以改变默认值
—- profile
—- publicPath 配置cdn设置 把 .nuxt/dist/client 传到cdn上
—- quiet 控制输出日志
—- splitChunks 默认选项
—- ssr 默认 true 通用模式 false是spa
—- styleResources 注入一些变量
—- templates
—- transpile
—- etc.
– css 每个页面都用到的全局css [] 需要对应安装预编译工具
– dev 定义 dev prod 默认nuxt是true,build start generate 是 flase
– env 客户端 服务端共享的环境变量
—- 自定义一个 baseUrl 在代码中通过 process.env-baseUrl 获取
– generate 生成静态站点。
—- dir 默认 dist 生成的目录名
—- devtools false
—- fallback ‘200.html’ 把站点部署到静态主机可以使用,回退到 spa
—- intervar 0 两个渲染周期的间隔
—- routes [] 动态路由不参与编译静态文件。需要手动提供数组。如果参数值是动态的,可以写一个promise函数 返回字符串数组
—- subFolders true 给每个目录生成index.html
—- concurrency 指定一个线程的并发数 500
– head 输出meta信息 参考 Vue-meta
– loading 页面切换时候的进度条。可以换自定义组件
– modules 添加通过用的js 比如 axios 统计
– modulesDir 自定义 node_moduels [‘node_modules’]
– plugins 需要在vue实例化前运行的js 比如 and element
– rootDir 设置根目录
– router
—- base / 根url
—- routeNameSplitter - 路由分隔符
—- extendRoutes 扩展自定义路由
—- linkActiveClass a连接默认的激活类名
—- linkExactActiveClass
—- linkPrefetchdClass
—- middleware 默认中间件 比如校验
—- mode
—- scrollBehavior
– server 定义服务器访问主机和端口
—- timing false 添加一个中间件测量ssr过程的时间,作为 server-timing 放到header里
—- port
—- host
– srcDir 源码目录 默认 client/
– dir 自定义目录,改变pages store等默认值
– transition 设置页面过度效果默认值

视图

可以改变默认模板。在app根目录常见 app.html 即可

默认布局 layouts/default.Vue 扩展默认

1
2
3
<template>
<nuxt />
</template>

要自定义布局 layouts/blog.Vue 然后在 pages/posts.Vue 里自定义 layout

自定义错误页面 /layouts/error.Vue 应当视为一个 page

页面。
nuxt给页面添加了一些功能。

  • asyncData 异步数据处理。第一个参数是当前页面的上下文对象
  • fetch 不会设置组件的data,单纯获取数据
  • head 配置当前页面的meta标签
    • 具体要参考 Vue-meta 使用文档
  • layout 指定布局
  • loading 可以手动控制loading 展示
  • transition 指定个过渡效果
  • scrollToTop 判定是否需要跳转到顶部
  • validate 校验动态路由的 参数
  • middleware 指定中间件,中间件会在渲染之前调用。

命令

  • nuxt 开发模式
  • nuxt build 编译
  • nuxt start 在build之后,启动一个web服务器
  • nuxt generate 编译生成静态文件

扫一扫,分享到微信

请我喝杯咖啡吧~