Vue的SSR——nuxt

栏目 Vue

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 ,版本最新不落后。

目录结构 #

├── .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> 获得内部元素

laouts 模板。在某个pages/a.vue

exportdefault {
 layout:"videos" // 自定义模板
 };

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

asyncData #

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

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

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

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

meta #

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

exportdefault {
    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 扩展默认

<template>
    <nuxt />
</tempalte>

要自定义布局 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 在buidl之后,启动一个web服务器
  • nuxt generate 编译生成静态文件