vue ssr笔记

bsr：浏览器渲染
ssr：服务端渲染。更好的seo（特别是有些信息平台类的站点，更需要被搜索引擎优先搜到）；更好的内容获取速度（少了页面首屏多次ajax请求动态拉取数据并渲染的时间）
vue框架：nuxt

路由：

不需要配置路由，pages目录下的vue文件就代表一级路由标签即可，然后在跟组件上加入<nuxt/>，类似于单页面的<router-view/>

声明式导航：

使用<nuxt-link/>，类似于单页面的<router-link/>

嵌套路由：

父路由组件上面用<nuxt-child/>,也是个组件容器，然后创建父组件同名目录，内部放子组件。

重定向：

配置nuxt.config.js

或者编写中间件

然后需要在router配置文件上面配置middleware：['yourRedirectFileName']

视图：

本质还是组件
组件默认加载的是layout目录下的default.vue文件,可以在路由组件上配置layout属性，指向指定的layout组件文件名

动态获取数据：

ssr和bsr的获取数据时机是不一样的。ssr会在vue解析模板之前就把数据准备好，一次渲染完成；而bsr一般是mounted回调再调ajax去拉取数据，然后重新渲染组件。

nuxt为vue组件提供了asyncData配置项，用来拉取数据。

反向代理
用户请求页面的时候请求会在后端完成，然后返回最终模板；如果是用户路由跳转，没有触发浏览器默认的xhr请求，请求是在浏览器（客户端）发送的。

由此会引发另一个问题：浏览器上请求会出现跨域问题。

因此需要服务端配置好反向代理：

npm -i @nuxtjs/axios -D // 这个应该不用手动装，脚手架应该装好了
npm -i @nuxtjs/proxy -D

在nuxtjs.config.js中添加axios和proxy模块，并配置反向代理

{
  modules: {
    '@nuxtjs/axios',
    '@nuxtjs/proxy'
  },
  axios: {
    proxy: true
  },
  proxy: {
    '/api': {
      target: 'http://xxx.com',
      pathRewrite: {
        '^/api': ''
      }，
      changeOrigin: true
    }
  }
}

还有一点要注意的是，组件内axios请求的地址配置要调整：

url: process.server ? 'http://xxx.com/api/aaa' : '/api/aaa'

process.server是一个全局变量，用来标识当前环境是不是服务端

第三方组件库（element ui为例）
配置nuxt.config.js

{
  css: ['element-ui/lib/theme-chalk/index.css'],
  plugins: [
    '@/plugins/element-ui'
  ]
}