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

以上の構成では、BASE_が設定されている場合にbaseUrl環境変数を作成しました.URL環境変数、baseUrlの値はBASE_に等しいURLの値、そうでなければその値はhttp://localhost:3000. 次に、baseUrl変数を次の2つの方法で使用できます.1.プロセスを通過する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'
    }
}

src Dir属性構成

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は、ページ切替遷移効果を設定するために使用されます.
义齿
レイアウト遷移の既定のプロパティを設定します.構成は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
}