nuxt.config.js文件用于組織Nuxt.js應(yīng)用的個(gè)性化配置，以便覆蓋默認(rèn)配置。

build

Nuxt.js允許你在自動(dòng)生成的vendor.bundle.js文件中添加一些模塊，以減少應(yīng)用bundle的體積。如果你的應(yīng)用依賴第三方模塊，這個(gè)配置項(xiàng)是十分實(shí)用的。

css配置

Nuxtjs里配置全局的css文件、模塊、庫(kù)。(每個(gè)頁(yè)面都會(huì)被引入，一般用于公共樣式)
如果要使用sass就必須要分別安裝node-sass和sass-loader。
在nuxt.config.js中，添加要使用的css資源：

module.exports = {
    css: [
        // 直接加載一個(gè)Node.js模塊
        'bulma',
        // 項(xiàng)目里要用的css文件
        '@/assets/css/main.css',
         // 項(xiàng)目里要用的scss文件
        '@/assets/css/main.scss'
    ]
}

Nuxt.js會(huì)自動(dòng)識(shí)別被導(dǎo)入文件的擴(kuò)展名，之后，webpack會(huì)使用對(duì)應(yīng)的預(yù)處理器進(jìn)行處理。前提是你安裝了對(duì)應(yīng)的預(yù)處理器。

dev屬性配置

配置Nuxt.js應(yīng)用是開(kāi)發(fā)模式還是生產(chǎn)模式。
dev屬性的值會(huì)被nuxt命令覆蓋：

• 當(dāng)使用nuxt命令時(shí)，dev會(huì)被強(qiáng)制設(shè)置成true
• 當(dāng)使用nuxt build，nuxt start或nuxt generate命令時(shí)，dev會(huì)被強(qiáng)制設(shè)置成false
  所以，在編碼中使用nuxt.js時(shí)才會(huì)用到該配置。
  例如(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 實(shí)例
let config = require('./nuxt.config.js')
const nuxt = new Nuxt(config)
app.use(nuxt.render)

// 在開(kāi)發(fā)模式下進(jìn)行編譯
if (config.dev) {
  new Builder(nuxt).build()
}

// 監(jiān)聽(tīng)指定端口
app.listen(port, '0.0.0.0')
console.log('服務(wù)器運(yùn)行于 localhost:' + port)

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

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

注意：要運(yùn)行上面的示例，你需要運(yùn)行npm install --save-dev cross-env 安裝 cross-env。 如果你在非 Windows 環(huán)境下開(kāi)發(fā)，你可以不用安裝 cross-env，這時(shí)需要把 start 腳本中的 cross-env 去掉。

環(huán)境變量配置

Nuxt.js讓你可以配置在客戶端和服務(wù)端共享的環(huán)境變量。
例如(nuxt.config.js)：

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

以上配置我們創(chuàng)建一個(gè)baseUrl環(huán)境變量，如果應(yīng)用設(shè)定了BASE_URL環(huán)境變量，那么baseUrl的值等于BASE_URL的值，否則其值為http://localhost:3000。
然后，我們可以通過(guò)以下兩種方式來(lái)使用baseUrl變量：
1.通過(guò)process.env.baseUrl
2.通過(guò)context.baseUrl
舉個(gè)例子，我們可以利用它來(lái)配置axios的自定義實(shí)例。
plugins/axios.js：

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

然后在頁(yè)面中，我們可以使用import axios from '~plugins/axios'引入axios模塊。

generate屬性配置

配置Nuxt.js應(yīng)用生成靜態(tài)站點(diǎn)的具體方式。
當(dāng)運(yùn)行nuxt generate命令或在編碼中調(diào)用nuxt.generate()時(shí)，Nuxt.js會(huì)使用generate屬性的配置。

head屬性配置

借助head屬性，Nuxt.js讓你可以在nuxt.config.js中配置應(yīng)用的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擴(kuò)展，可以擴(kuò)展它的核心功能并添加無(wú)限的集成。

modulesDir屬性

用于設(shè)置路徑解析的模塊目錄，例如：webpack resolveLoading, nodeExternal和postcss。配置路徑為相對(duì)路徑options.rootDir

plugins屬性配置

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

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

然后我們需要?jiǎng)?chuàng)建plugins/vue-notifications.js文件：

import Vue from 'vue'
import VueNotifications from 'vue-notifications'

Vue.use(VueNotifications)

plugins屬性配置的所有插件會(huì)在Nuxt.js應(yīng)用初始化之前被加載導(dǎo)入。
每次你需要使用 Vue.use() 時(shí)，你需要在 plugins/ 目錄下創(chuàng)建相應(yīng)的插件文件，并在 nuxt.config.js 中的 plugins 配置項(xiàng)中配置插件的路徑。

rootDir屬性配置

設(shè)置Nuxt.js應(yīng)用的根目錄。
該配置項(xiàng)的值會(huì)被nuxt命令行指定的路徑參數(shù)覆蓋(例如：nuxt my-app/會(huì)將rootDir的值覆蓋設(shè)置為my-app/目錄對(duì)應(yīng)的絕對(duì)路徑)。

server屬性

Nuxt.js允許為應(yīng)用程序內(nèi)部nuxt.config.js中定義服務(wù)器訪問(wèn)主機(jī)和端口。

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

srcDir屬性配置

設(shè)置Nuxt.js應(yīng)用的源碼目錄

transition屬性配置

用于設(shè)置頁(yè)面切換過(guò)渡效果的默認(rèn)屬性值。
默認(rèn)值：

{
   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用于設(shè)置頁(yè)面切換過(guò)渡效果。

layoutTransition屬性

用于設(shè)置布局過(guò)渡的默認(rèn)屬性。配置與layout相同
默認(rèn)：

{
    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
}