NUXT配置

Nuxt.js配置

什么是Nuxt.js

Nuxt.js 是一个基于 Vue.js 的通用应用框架。
Nuxt.js 预设了利用 Vue.js 开发服务端渲染的应用所需要的各种配置。
Vue是开发SPA(单页应用)的，但SPA的HTML只有一个无实际内容的HTML和一个app.js，搜索引擎无法获取到页面内容，于是Nuxt.js应运而生

1. SSR技术 ，服务端渲染（Server Side Render），网页通过服务端渲染生成后输出给客户端；
2. 单页 Web 应用通常不利于SEO , 所以对于SEO要求高的网站通常可以使用服务端渲染；
3. 启动时nuxt，它将启动具有热更新加载的开发服务器，并且Vue 服务器端渲染配置为自动为服务器呈现应用程序。
4. 如果您不想使用服务器端渲染或需要应用程序提供静态托管，则可以使用 nuxt --spa 命令即可使用 SPA 模式。

nuxt.config.js

build
Nuxt.js 允许你根据服务端需求，自定义 webpack 的构建配置。

1. analyze：使用 webpack-bundle-analyzer 分析并可视化构建后的打包文件，你可以基于分析结果来决定如何优化它。
2. babel： 为 JS 和 Vue 文件设定自定义的 babel 配置。
3. extractCSS: 使用extract-css-chunks-webpack-plugin将主块中的 CSS 提取到一个单独的 CSS 文件中（自动注入模板），该文件允许单独缓存文件。
4. styleResources: 当您需要在页面中注入一些变量和mixin而不必每次都导入它们时使用， 是⽤来注⼊变量，函数，混合等声明式内容

css
在 Nuxtjs 里配置全局的 CSS 文件、模块、库。 (每个页面都会被引入).Nuxt.js 会自动识别被导入文件的扩展名，之后，webpack 会使用相应的预处理器进行处理。
env
Nuxt.js 让你可以配置在客户端和服务端共享的环境变量。

module.exports = {
  env: {
    baseUrl: process.env.BASE_URL || 'http://localhost:3000'
  }
}

head
借助 head 属性，Nuxt.js 让你可以在 nuxt.config.js 中配置应用的 meta 信息。

module.exports = {
  head: {
    titleTemplate: '%s - Nuxt.js',
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      { hid: 'description', name: 'description', content: 'Meta description' }
    ]
  }
}

loading
在页面切换的时候，Nuxt.js 使用内置的加载组件显示加载进度条。你可以定制它的样式，禁用或者创建自己的加载组件。
在你的组件中你可以使用this.$nuxt.$loading.start()来启动加载条。使用this.$nuxt.$loading.finish()来使加载条结束。

export default {
  mounted() {
    this.$nextTick(() => {
      this.$nuxt.$loading.start()

      setTimeout(() => this.$nuxt.$loading.finish(), 500)
    })
  }
}

1. 个性化加载进度条
2. 自定义加载组件
   你可以新建一个加载组件替代 Nuxt.js 默认的。使用自己的加载组件，需要在 loading 配置项里指定组件的路径，Nuxt.js 会自动调用该组件
   

plugins
类型： Array
数组元素类型： String 或 Object
如果数组元素类型是 Object， 其具有以下属性：
src: String (文件的路径)
ssr: Boolean (默认为 true) 如果值为 false，该文件只会在客户端被打包引入。

module.exports = {
  plugins: [
    { src: '~/plugins/vue-lazyload', ssr: false },
    { src: '~/plugins/swiper.js', ssr: false },
    { src: '~/plugins/prototype.js', ssr: false }
    ]
}

layouts

layouts 根目录下的所有文件都属于个性化布局文件，可以在页面组件中利用 layout 属性来引用。
错误页面

虽然此文件放在 layouts 文件夹中, 但应该将它看作是一个 页面(page).

可以通过编辑 layouts/error.vue 文件来定制化错误页面.
这个布局文件不需要包含 标签。你可以把这个布局文件当成是显示应用错误（404，500 等）的组件。

asyncData 方法

asyncData方法使得你能够在渲染组件之前异步获取数据。限于页面组件每次加载之前被调用。
query 的改变不会调用asyncData方法， path更改则会调用

export default {
  async asyncData({ req, res }) {
    // 使用 req 和 res
    if (process.server) {  // 检查是否来自服务端渲染
      return { host: req.headers.host }
    }

    return {}
  }
}

第一个参数被设定为当前页面的上下文对象
上下文对象

1. app: 包含所有插件的Vue 根实例，context.app.$axios 来获取axios
2. req： Request 对象
3. res: Response 对象
4. isDev: 是否开发者模式
5. route： 路由实例
6. store：Vuex.Store 实例
7. env：nuxt.config.js 中配置的环境变量
8. params、query: route.params、 route.query
9. error: error(params),显示错误信息页面,params 参数应该包含 statusCode 和 message 字段

watchQuery 属性

监听参数字符串的更改。默认情况下，query 的改变不会调用asyncData方法。

如果定义的字符串发生变化，将调用所有组件方法(asyncData, fetch, validate, layout, …)。
为了提高性能，默认情况下禁用。

如果您要为所有参数字符串设置监听， 请设置： watchQuery: true.

预处理器

得益于 vue-loader, 我们可以通过 lang 属性在组件中的，

<template lang="pug">
  h1.red Hello {{ name }}!
</template>

<style lang="sass">
  .red
    color: red
</style>

<style lang="less">
  .red {
    color: red;
  }
</style>