Nuxt.js 默认的配置涵盖了大部分使用情形，可通过 **nuxt.config.js** 来覆盖默认的配置。

head

  head: {
    title: '关河智图',
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      {
        hid: 'description',
        name: 'description',
        content: '关河智图，关河因果，因果分析，数据分析。'
      },
      {
        name: 'keywords',
        content: '关河智图 关河因果 因果分析 数据分析'
      },
      { name: 'format-detection', content: 'telephone=no' }
    ],
    link: [{ rel: 'icon', type: 'image/x-icon', href: '/favicon.svg' }],
    script: [
      { src: 'https://hm.baidu.com/hm.js?1e79b0ed313e79c1f5490fd11dae46af' }
    ]
  },

配置 script 脚本

// 链接形式
head:{
    script:[{src='xxx.js'}]
}

env 环境变量配置

Nuxt.js 让你可以配置在客户端和服务端共享的环境变量。

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

以上配置我们创建了一个 baseUrl 环境变量，如果应用设定了 BASE_URL 环境变量，那么 baseUrl 的值等于 BASE_URL 的值，否则其值为 http://localhost:3000。

然后，我们可以通过以下两种方式来使用 baseUrl 变量：

通过 process.env.baseUrl
通过 context.baseUrl，请参考 context api

你可以使用 env 属性配置第三方服务的公钥信息。
举个例子，我们可以利用它来配置 axios 的自定义实例。

import axios from 'axios'
export default axios.create({
  baseURL: process.env.baseUrl
})

然后在页面中，我们可以使用 import axios from ‘~/plugins/axios’ 引入 axios 模块。

modules Nuxt.js 扩展

modules 是 Nuxt.js 扩展，可以扩展它的核心功能并添加无限的集成。

export default {
  modules: [
    // Using package name
    '@nuxtjs/axios',
    // Relative to your project srcDir
    '~/modules/awesome.js',
    // Providing options
    ['@nuxtjs/google-analytics', { ua: 'X1234567' }],
    // Inline definition
    function () {}
  ]
}

plugins 插件

类型： Array
- 数组元素类型： String 或 Object

如果数组元素类型是 Object，其具有以下属性：

src: String (文件的路径)

ssr: Boolean (默认为 true) 如果值为 false，该文件只会在客户端被打包引入。

plugins: [
  '@/plugins/element-ui',
  '@/plugins/i18n.js',
  { src: '@/plugins/favicon.js', ssr: false }
],

plugins** 属性使得你可以轻易地为 Nuxt.js 配置使用 Vue.js 插件。**

module.exports = {
  plugins: ['~plugins/vue-notifications']
}

然后, 我们需要创建 plugins/vue-notifications.js 文件：

import Vue from 'vue'
import VueNotifications from 'vue-notifications'
Vue.use(VueNotifications)

plugins 属性配置的所有插件会在 Nuxt.js 应用初始化之前被加载导入。

每次你需要使用 Vue.use() 时，你需要在 plugins/ 目录下创建相应的插件文件，并在 nuxt.config.js 中的 plugins 配置项中配置插件的路径。

router 属性配置

router 属性让你可以个性化配置 Nuxt.js 应用的路由（vue-router）。

学习 Web 前端