Nuxt.js是一个基于Vue.js的服务端渲染(SSR)框架，它提供了一种快速构建Web应用程序的方式，既可以满足前端开发的需求，又可以让应用程序在SEO、性能优化等方面获得更好的表现。随着前端技术的不断发展，Nuxt.js已经成为了现代Web应用程序开发中不可或缺的工具之一。本文记录自己学习Nuxt需要记录的知识点。

asyncData运行在服务端，客户端储存的cookie，在服务端无法获取

在axios里，通过process是否在服务端，在发送的时候带上cookie

js
// process.server   Boolean，为true时，此时环境在服务端
// process.client   Boolean，为true时，此时环境在客户端

if(process.server){  // 是否在服务端运行，如果是，则带上session
  config.headers={
    ...config.headers,
    cookie:process.headers.cookie
  }

但是process下，并不会携带headers这个属性，这个时候需要我们创造

我们可以通过middleware中间件

js
export default function({req}){  // req是服务端的Request 对象
  process.headers = req.headers 
}

上面的方法是session以cookie形式时的解决方法，那么当使用token时，

js
import Cookies from 'js-cookie'
 
if(process.server){ // token用cookie存储
  let cookies=process.headers.cookie.split('; ')
  let cookieObj={}
  cookies.forEach((key,index)=>{
    let split=key.split('=')
    cookieObj[split[0]]=split[1]
  })
  config.headers['Authorization'] =cookieObj['Authorization']
}
else{
  config.headers['Authorization'] =Cookies.get('Authorization')
}

Nuxt视图

可通过添加 layouts/default.vue 文件来扩展应用的默认布局，可以在此处添加全局css

可以通过编辑 layouts/error.vue 文件来定制化错误页面

vue的head可以覆盖nuxt.config.js

js
// 个性化布局
export default {
  layout: 'blog',
  // 或
  layout (context) {
    return 'blog'
  }
}

全局css配置

nuxt.config.js

js
css: ['~common/css/base.scss']