vue.js 是单页面应用，但是对 seo 不友好，nuxt 是基于vue 开发的服务端渲染的框架，最后项目可以打包多个静态页面，解决了 seo 问题

过度动效

  • Nuxt.js 默认使用的过渡效果名称为 page

asyncData

  • asyncData 方法会在组件（仅限于页面组件）每次加载之前被调用，第一个参数是当前页面的 上下文对象，可以利用此方法从后台获取数据，Nuxt.js 会将 asyncData 返回的数据融合到 data 中
  • 不建议使用此方法，因为 created 也能够达到这样的效果，最关键的是下面会说到使用自定义插件的时候，asyncData 方法无法在上下文对象中拿到我们自己定义的属性

插件加载

  • 这里我们详细说下，如何将 axios 作为插件整合到 Vue 实例中去
  • 如果我们的项目是基于 JWT，或许我们需要客户每次发送请求的时候都附带上存储在本地的 Token，
  • 在项目的 plugins目录下新建文件夹和文件，/plugin/http/http.js，/plugin/http/index.js
  • /plugin/http/http.js，内容如下
import axios from 'axios'

export const http = axios.create({
  baseURL: 'http://localhost:8888'
})


http.interceptors.request.use(function (config) {
  //.....
  config.headers['Authorization'] = 'token'
  return config
}, function (error) {
  return Promise.reject(error)
})

// console.log(this.$store)
http.interceptors.response.use(function (response) {
  var code = response.data.code;
  if (code === 403) {
    //......
  }
  return response
}, function (error) {
  return Promise.reject(error)
})


const httpPlugin = {}

httpPlugin.install = function (Vue, options) {
  Vue.prototype.$http = http
}

export default httpPlugin;

import axios from 'axios'

export const http = axios.create({
  baseURL: 'http://localhost:8888'
})


http.interceptors.request.use(function (config) {
  //.....
  config.headers['Authorization'] = 'token'
  return config
}, function (error) {
  return Promise.reject(error)
})

// console.log(this.$store)
http.interceptors.response.use(function (response) {
  var code = response.data.code;
  if (code === 403) {
    //......
  }
  return response
}, function (error) {
  return Promise.reject(error)
})


const httpPlugin = {}

httpPlugin.install = function (Vue, options) {
  Vue.prototype.$http = http
}

export default httpPlugin;
  • /plugin/http/index.js，内容如下
import Vue from 'vue'

import httpPlugin from './http.js'

Vue.use(httpPlugin)
import Vue from 'vue'

import httpPlugin from './http.js'

Vue.use(httpPlugin)
  • nuxt.config.js 下添加配置
module.exports = {
  plugins: ['~/plugins/http/index.js']
}
module.exports = {
  plugins: ['~/plugins/http/index.js']
}
  • 使用的时候就无需再此引用 axios，关键是添加了 axios 拦截配置

middleware

  • 中间件允许您定义一个自定义函数运行在一个页面或一组页面渲染之前。
  • 每一个中间件应放置在 middleware 目录下，文件名的名称将成为中间件名称，例如 /middleware/check.js，将成为 check 中间件
  • 中间件接受上下文对象作为其第一个参数
import axios from 'axios'

export default function ({ route }) {
  return axios.post('http://my-stats-api.com', {
    url: route.fullPath
  })
}
import axios from 'axios'

export default function ({ route }) {
  return axios.post('http://my-stats-api.com', {
    url: route.fullPath
  })
}
  • nuxt.config.js，添加如下配置
module.exports = {
  router: {
    middleware: 'check'
  }  
}
module.exports = {
  router: {
    middleware: 'check'
  }  
}
  • 中间件 check，除了刚进入网站的第一次无法被调用以外，会在路由每一次改变时被调用

no-ssr

  • 加载一些组件常常会出现如下提示，解决办法是用标签 no-ssr 进行包裹
[Vue warn]: The client-side rendered virtual DOM tree is not matching server-rendered content.
[Vue warn]: The client-side rendered virtual DOM tree is not matching server-rendered content.
<no-ssr>
    <mavon-editor v-model="previewContent"/>
</no-ssr>
<no-ssr>
    <mavon-editor v-model="previewContent"/>
</no-ssr>

项目打包

  • 推荐使用，npm run generate，最后会打包成多个静态页面
  • 打包之后点击页面，或许无法看到图片，不用担心，你的配置是没有错的，放到 live-server 中就能看到
  • 如果选择打包 选择 build 之后你又 npm run dev 进行开发，那么你将有可能出现以下问题：Cannot read property 'call' of undefine，解决办法：https://github.com/nuxt/nuxt.js/issues/2692
  • npm run generate，对于静态页面的打包时无法打包动态路由的，例如 _id.vue，官方给的配置是有问题的，GitHub上的解决办法：https://github.com/nuxt/nuxt.js/issues/2149，我并没有尝试，最后我还是将动态路由，改成 /users?id=1 这样的形式