vue2+nuxt2实现服务端渲染（ssr），入门到项目

服务端渲染是为了解决VUE这类的单页面应用的常见问题，例如：SEO不友好，首页加载慢等问题。
vue2 + nuxt 2 +element
1
2

一、创建vue-nuxt项目

npx create-nuxt-app nuxt-test-demo
1

1.安装步骤：

2.创建完成以后就可以跑起来项目：

3.使用 npm run dev 运行

我们可以看下创建后的nuxt+vue项目的目录结构

二、nuxt的生命周期

2.1 服务端生命周期

2.1.1、 nuxtServerInit( store , context){} link
参数1 ：vuex上下文
参数2 ：nuxt上下文
服务端的会话状态树里可以通过 req.session.user 来访问当前登录的用户。将该登录用户信息传给客户端的状态树，我们只需更新 store/index.js

actions: {
  nuxtServerInit ({ commit }, { req }) {
    if (req.session.user) {
      commit('user', req.session.user)
    }
  }
}
1
2
3
4
5
6
7

只有主模块（即 store/index.js）适用设置该方法（其他模块设置了也不会被调用）。

我们可以看到服务端 打印出来的，如下：

2.1.2、 中间件 middleware({store,route,redirect,params,query,req,res}){} link

中间件middleware可以做全局理由拦截，类似于vue中的路由守卫
(1)、全局使用
在nuxt.config.js 中配置

  router: {
    middleware: 'auth' //中间件名称
  },
1
2
3

在根目录下创建文件夹middleware/auth,js

export default function ({
  store,
  route,
  redirect,
  params,
  query,
  req,
  res
}) {
  console.log("中间件--可以做全局路由拦截")
}
1
2
3
4
5
6
7
8
9
10
11

我们可以看到控制 服务端打印

当我们进行路由跳转时候可以看到触发了中间件

(2)、局部使用
在单页面使用
test.vue

<template>
  <div>
    test
  div>
template>

<script>
export default {
  middleware: 'auth'
}
script>

<style scoped>
style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

或

<template>
  <div>
    test
  div>
template>

<script>
export default {
  // middleware: 'auth'
  middleware() {
    console.log("middleware 局部使用")
  }
}
script>

<style scoped>
style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

2.1.3、 validate可以让你在动态路由对应的页面组件中配置一个校验方法用于校验动态路由参数的有效性。

validate({ params, query }) {
  return true // 如果参数有效
  return false // 参数无效，Nuxt.js 停止渲染当前页面并显示错误页面
}
or
async validate({ params, query, store }) {
  // await operations
  return true // 如果参数有效
  return false // 将停止Nuxt.js呈现页面并显示错误页面
}
validate({ params, query, store }) {
  return new Promise((resolve) => setTimeout(() => resolve()))
}
1
2
3
4
5
6
7
8
9
10
11
12
13

页面中使用：

<template>
  <div>
    test
  div>
template>

<script>
export default {
  // middleware: 'auth'
  middleware() {
    console.log("middleware 局部使用")
  },
  validate({ params, query }) {

    console.log("路由参数", params, query)
    if (query.id == '123') {
      return true
    } else {
      return false
    }

  }
}
script>

<style scoped>
style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

2.1.4 asyncData 方法会在组件（限于页面组件）每次加载之前被调用,它可以在服务端或路由更新之前被调用。

         在这个方法被调用的时候，第一个参数被设定为当前页面的上下文对象，
         你可以利用 asyncData方法来获取数据并返回给当前组件。

            asyncData({store,params}){}
            pages中的页面请求数据
1
2
3
4
5

export default {
  data() {
    return { project: 'default' }
  },
  asyncData(context) {
    return { project: 'nuxt' }
  }
}
1
2
3
4
5
6
7
8

2.1.5 fetch({ store, params }){} 是在组件初始化之前被调用

三、 服务端和客户端共有的 生命周期

    beforeCreate
    created
1
2

四、 客户端 生命周期

 同vue
1

五、nuxt路由

5.1 自动生成
路由的跳转 和vue差不多意思 nuxt-link

5.2 使用自定义router.js

(1) 下载  @nuxtjs/router
npm i @nuxtjs/router -S

(2) 下载完成后在nuxt.config.js 的modules模块进行配置

     modules: [
      '@nuxtjs/router'
    ],
(3) 把router文件放入nuxt项目根目录
    *******必须router.js

(4) 修改router.js的内容

(5) nuxtjs/router 返回的内容和vue的有所不同

        export function createRouter() {
            return new VueRouter({
                mode: 'history',
                routes
            })
        }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

5.3 路由导航守卫

5.3.1 router.js

    vue-cli中怎么用，nuxt中就怎么用，几乎一样

        {
                path: '/list',
                name: 'List',
                component: List,
                beforeEnter(to,from,next){
                    console.log("路由独享守卫")
                    next()
                }
        }


        let router = new VueRouter({
            mode: 'history',
            routes
        })

        // 路由全局守卫  和vue-router 一样
        router.beforeEach((to, from, next) => {
            console.log("全局守卫", to)
            if (to.name == 'home') {
                next('/about')
            } else {
                next()
            }
        })

        export function createRouter() {
            return router
        }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

5.3.2 nuxtjs

5.3.3 中间件 : middleware

    a> 全局
1、nuxt.config.js  配置
      // 路由全局配置
  router: {
    // mode: 'history',
    middleware: 'auth'
  },

2、新建middleware/auth.js
        export default function ({
            store,
            route,
            redirect,
            params,
            query,
            req,
            res
            }) {

                // let token = store.state.token
                // if(!token){
                //     redirect('/list')
                // }
                if (route.name == 'list') {
                    redirect("/HomeView")
                }
                console.log("middleware auth", route)
            }






b> 局部

1、新建middleware/auth.js
export default function ({
        store,
        route,
        redirect,
        params,
        query,
        req,
        res
        }) {

            // let token = store.state.token
            // if(!token){
            //     redirect('/list')
            // }
            if (route.name == 'list') {
                redirect("/HomeView")
            }
            console.log("middleware auth", route)
        }


2、组件使用

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70

六 插件 : plugins 全局

a> nuxt.config.js 进行配置

  plugins: [
    '@/plugins/element-ui',
    '@/plugins/routers.js'
 ],
1
2
3
4

b> 新建plugins/routers.js

export default ({ app }) => {
  console.log("plugins-routers", app.router.beforeEach)
  app.router.beforeEach((to, form, next) => {
    console.log("plugins-route", to)
    next()
  })
}
1
2
3
4
5
6
7

************补充：服务端不能使用localStorage和cookie的解决方案

连接：https://www.npmjs.com/package/cookie-universal-nuxt
1、安装下载

npm i --save cookie-universal-nuxt
1

2、nuxt.config.js 进行配置

  modules: [
    'cookie-universal-nuxt'
  ]
1
2
3

3、正常使用

 this.$cookies.set()
 this.$cookies.get()
 ...
1
2
3

七、vuex的使用

学习生命周期钱我们先学习一下store如何使用
store/index.js
方法一：（nuxt官方推荐）并且nuxt3版本已经弃用

import Vue from 'vue'
import Vuex from "vuex"
Vue.use(Vuex);
const store = () => {
  return new Vuex.Store({
    state: {
      count: 1
    }
  })
}
export default store
1
2
3
4
5
6
7
8
9
10
11

方法二：nuxt官方推荐，重点使用
store/index.js

// state
export const state = () => ({
  count: 1
})
// mutations
export const mutations = {
  countAdd(state) {
    state.count++
  }
}
// actions
export const actions = {
  // 生命周期 服务端加载
  nuxtServerInit(store, context) {
    // store.commit('setToken', 'token12345')
    console.log("服务端加载 - nuxtServerInit")
    // console.log("nuxtServerInit2",context)

  }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

在store目录下直接创建use.js相当于在modules:{user}
store/user.js

export const state = () => ({
  userName: '张三'
})

1
2
3
4

八、项目上线

1. 执行： npm run build

2. 将打包好的

   .nuxt ===>隐藏文件
   static
   nuxt.config.js
   package.json

   把以上文件丢到服务器某个文件中（demo），并且在服务器安装node环境

3. 在服务上执行 npm install (需要cd到demo文件夹里执行)

4. 在服务器运行项目 npm run start

5. 运行后打开的也是 localhost:3000 需要使用nginx做代理 ==> www.xxxxx.com

未完待续…