为了少走弯路，记录一下Nuxt项目中一些步骤和坑

1.项目构建

步骤1、npm install -g create-nuxt-app  # 全局安装 Nuxt.js脚手架工具 create-nuxt-app
步骤2、npx create-nuxt-app <项目名>  # 根据提示安装必要模块
步骤3、npm run dev #启动成功 访问路径：http://localhost:3000/

根据上面三个步骤，一个基本服务端渲染vue项目环境基本的搭建完成

2、安装一下必要依赖

步骤4、npm install node-sass sass-loader -save-dev    # sass预编译
步骤5、npm install @nuxtjs/axios @nuxtjs/proxy -save-dev   # axios 请求和代理
步骤6、npm install normalize.css -S  # 基本css
步骤7、npm install js-cookie -S  # js-cookie cookie处理

......


按需新增

3.asyncData 方法

asyncData方法会在组件（限于页面组件）每次加载之前被调用。它可以在服务端或路由更新之前被调用。 在这个方法被调用的时候，第一个参数被设定为当前页面的上下文对象，你可以利用 asyncData方法来获取数据，Nuxt.js 会将 asyncData 返回的数据融合组件 data 方法返回的数据一并返回给当前组件。

注意：由于asyncData方法是在组件 初始化 前被调用的，所以在方法内是没有办法通过 this 来引用组件的实例对象。

4.fetch 方法

如果页面组件设置了 fetch 方法，它会在组件每次加载前被调用（在服务端或切换至目标路由之前）。

fetch 方法的第一个参数是页面组件的上下文对象 context，我们可以用 fetch 方法来获取数据填充应用的状态树。为了让获取过程可以异步，你需要返回一个 Promise，Nuxt.js 会等这个 promise 完成后再渲染组件。

警告: 您无法在内部使用this获取组件实例，fetch是在组件初始化之前被调用

5.head 方法

使用 head 方法设置当前页面的头部标签。在 head 方法里可通过 this 关键字来获取组件的数据，你可以利用页面组件的数据来设置个性化的 meta 标签。

<template>
  <h1>{{ title }}</h1>
</template>

<script>
export default {
  data () {
    return {
      title: 'Hello World!'
    }
  },
  head () {
    return {
      title: this.title,
      meta: [
        { hid: 'description', name: 'description', content: 'My custom description' }
      ]
    }
  }
}
</script>

6.layout 属性

使用 layout 属性来为页面指定使用哪一个布局文件：

export default {
  layout: 'blog',
  // 或
  layout (context) {
    return 'blog'
  }
}

在上面的例子中， Nuxt.js 会使用 layouts/blog.vue 作为当前页面组件的布局文件。

 

7.中间件 middleware

中间件允许您定义一个自定义函数运行在一个页面或一组页面渲染之前

中间件执行流程顺序：

1. nuxt.config.js
2. 匹配布局
3. 匹配页面

下面来一个简单的用中间件判断是否用户登录的demo：

新建middleware   userAuth.js ：

import utils from '~/utils/utils'

export default function ({route, req, res, redirect}) {
  let isClient = process.client; // 客户端
  let isServer = process.server; // 服务端
  let redirectURL = '/login';
  var token, path
  //在服务端
  if (isServer) {
    let cookies = utils.getcookiesInServer(req)
    path = req.originalUrl;
    token = cookies.token ? cookies.token : ''
    console.log('userAuth token:'+ token)
  }
  //在客户端判读是否需要登陆
  if (isClient) {
    token = utils.getcookiesInClient('token')
    path = route.path;
  }
  if (path) {
    redirectURL = '/login?ref=' + encodeURIComponent(path)
  }
  //需要进行权限判断的页面开头
  if (!token) {
    redirect(redirectURL)
  }
}

utils.js

/**
 * Creation time:2019/8/20
 */
import Cookie from 'js-cookie'
export default{
  // 获取服务端cookie
  getcookiesInServer:function (req) {
    // console.log(req.headers.cookie)
    let service_cookie = {};
    req && req.headers.cookie && req.headers.cookie.split(';').forEach(function (item, index) {
      let parts = item.split('=');
      service_cookie[parts[0].trim()] = (parts[1] || '').trim();
    });
    return service_cookie;
  },
  // 获取客户端cookie
  getcookiesInClient:function (key) {
    return Cookie.get(key) ? Cookie.get(key) : ''
  }
}

users.vue 使用中间件

<template>
  <div>
    <p>嵌套路由:users.vue</p>
    <nuxt-child/>
  </div>
</template>
<script>
  export default {
    layout: 'navbar-layouts',
    middleware: 'userAuth'
  }
</script>

<style scoped>
</style>

由上面的代码，可以看出当加载user.vue的时候 会执行中间件：userAuth  中间件是在服务端运行的 所以需要做是否在服务端或者客户端的判断，上面的userAuth 判断是否存在 token  如果不存在 直接跳转到 登录页

 

8.nuxt.config.js 大部分的配置都在这里

export default {
  mode: 'universal',
  /*
 ** 端口和ip
 */
  server: {
    port: 80, // default: 3000
    host: '0.0.0.0', // default: localhost
  },
  /*
  ** Headers of the page
  */
  head: {
    title: process.env.npm_package_name || '',
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      { hid: 'description', name: 'description', content: process.env.npm_package_description || '' }
    ],
    link: [
      { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
    ]
  },
  /*
  ** Customize the progress-bar color
  */
  loading: {
    color: '#4FC08D',
    failedColor: '#bf5050',
    duration: 1500
  },
  /*
  ** Global CSS
  */
  css: [
    'normalize.css',
    '~assets/main.css'
  ],
  /*
  ** Plugins to load before mounting the App
  */
  plugins: [
  ],
  /*
  ** Nuxt.js dev-modules
  */
  devModules: [
  ],
  /*
  ** Nuxt.js modules
  */
  modules: [
    '@nuxtjs/axios',
    '@nuxtjs/proxy'
  ],
  generate: {
    routes: [
      '/users/1',
      '/users/2'
    ]
  },
  // // 动态路由 异步获取
  // generate: {
  //   routes: function () {
  //     return axios.get('https://my-api/users')
  //       .then((res) => {
  //         return res.data.map((user) => {
  //           return '/users/' + user.id
  //         })
  //       })
  //   }
  // },
  axios: {
    proxy: true
  },
  proxy: {
    '/v2': {
      target: 'http://api.douban.com',
      pathRewrite: {
        '^/v2': '/v2'
      }
    }
  },
  /*
  ** Build configuration
  */
  build: {
    /*
    ** You can extend webpack config here
    */
    extend (config, ctx) {
    }
  }
}

更多的属性可以参考NUXTJS官网：https://zh.nuxtjs.org/guide

下面提供一下简单demo：https://github.com/hwq888/SSR-service