nuxt.config.js文件

nuxt.config.js文件用于组织Nuxt.js应用的个性化配置，以便覆盖默认配置。

build

Nuxt.js允许你在自动生成的vendor.bundle.js文件中添加一些模块，以减少应用bundle的体积。如果你的应用依赖第三方模块，这个配置项是十分实用的。

css配置

Nuxtjs里配置全局的css文件、模块、库。(每个页面都会被引入，一般用于公共样式)
如果要使用sass就必须要分别安装node-sass和sass-loader。
在nuxt.config.js中，添加要使用的css资源：

module.exports = {
    css: [
        // 直接加载一个Node.js模块
        'bulma',
        // 项目里要用的css文件
        '@/assets/css/main.css',
         // 项目里要用的scss文件
        '@/assets/css/main.scss'
    ]
}

Nuxt.js会自动识别被导入文件的扩展名，之后，webpack会使用对应的预处理器进行处理。前提是你安装了对应的预处理器。

dev属性配置

配置Nuxt.js应用是开发模式还是生产模式。
dev属性的值会被nuxt命令覆盖：

• 当使用nuxt命令时，dev会被强制设置成true
• 当使用nuxt build，nuxt start或nuxt generate命令时，dev会被强制设置成false
  所以，在编码中使用nuxt.js时才会用到该配置。
  例如(nuxt.config.js)：

module.exports = {
   dev: (process.env.NODE_ENV) !== 'production'
}

在server.js中：

const {Nuxt, Builder} = require('nuxt')
const app = require('express')()
const port = process.env.PORT || 3000

// 传入配置初始化 Nuxt.js 实例
let config = require('./nuxt.config.js')
const nuxt = new Nuxt(config)
app.use(nuxt.render)

// 在开发模式下进行编译
if (config.dev) {
  new Builder(nuxt).build()
}

// 监听指定端口
app.listen(port, '0.0.0.0')
console.log('服务器运行于 localhost:' + port)

然后可在package.json中添加脚本配置如下：

{
  "scripts": {
    "dev": "node server.js",
    "build": "nuxt build",
    "start": "NODE_ENV=production node server.js"
  }
}

注意：要运行上面的示例，你需要运行npm install --save-dev cross-env 安装 cross-env。 如果你在非 Windows 环境下开发，你可以不用安装 cross-env，这时需要把 start 脚本中的 cross-env 去掉。

环境变量配置

Nuxt.js让你可以配置在客户端和服务端共享的环境变量。
例如(nuxt.config.js)：

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

以上配置我们创建一个baseUrl环境变量，如果应用设定了BASE_URL环境变量，那么baseUrl的值等于BASE_URL的值，否则其值为http://localhost:3000。
然后，我们可以通过以下两种方式来使用baseUrl变量：
1.通过process.env.baseUrl
2.通过context.baseUrl
举个例子，我们可以利用它来配置axios的自定义实例。
plugins/axios.js：

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

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

generate属性配置

配置Nuxt.js应用生成静态站点的具体方式。
当运行nuxt generate命令或在编码中调用nuxt.generate()时，Nuxt.js会使用generate属性的配置。

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' }
    ]
  }
}

想了解head属性的可用配置，可以参考vue-meta配置文档。

modules属性

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

modulesDir属性

用于设置路径解析的模块目录，例如：webpack resolveLoading, nodeExternal和postcss。配置路径为相对路径options.rootDir

plugins属性配置

plugins属性使得你可以轻易地为Nuxt.js配置使用Vue.js插件。
例如(nuxt.config.js)：

module.export = {
    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 配置项中配置插件的路径。

rootDir属性配置

设置Nuxt.js应用的根目录。
该配置项的值会被nuxt命令行指定的路径参数覆盖(例如：nuxt my-app/会将rootDir的值覆盖设置为my-app/目录对应的绝对路径)。

server属性

Nuxt.js允许为应用程序内部nuxt.config.js中定义服务器访问主机和端口。

export defult {
    server: {
        port: 8000,
        host: '0.0.0.0'
    }
}

srcDir属性配置

设置Nuxt.js应用的源码目录

transition属性配置

用于设置页面切换过渡效果的默认属性值。
默认值：

{
   name: 'page',
   mode: 'out-in'
}

例如(nuxt.config.js)：

module.exports = {
  transition: 'page'
  // or
  transition: {
    name: 'page',
    mode: 'out-in',
    beforeEnter (el) {
      console.log('Before enter...');
    }
  }
}

transition用于设置页面切换过渡效果。

layoutTransition属性

用于设置布局过渡的默认属性。配置与layout相同
默认：

{
    name: 'layout',
    mode: 'out-in'
}

例如(nuxt.config.js)：

export default {
  layoutTransition: 'layout'
  // or
  transition: {
    name: 'layout',
    mode: 'out-in'
  }
}

全局配置示例css：

.layout-enter-active, .layout-leave-active {
  transition: opacity .5s
}
.layout-enter, .layout-leave-active {
  opacity: 0
}