nuxt.config.js 是 Nuxt.js 的配置檔案，可以通過針對一系列引數的設定來完成 Nuxt.js 專案的配置，可以在Nuxt.js 官網 找到針對這個檔案的說明，下面舉例一些常用的配置：

head: 可以在這個配置項中配置全域性的 head ，如定義網站的標題、 meta ，引入第三方的 CSS、JavaScript 檔案等：

 head: {
  title: '百姓店鋪',
  meta: [
     { charset: 'utf-8' },
     { name: 'viewport', content: 'width=device-width, initial-scale=1' },
     { name: 'applicable-device', content: 'pc,mobile' },
  ],
  link: [
    { rel: 'icon', type: 'image/x-icon', href: '/logoicon.ico' }//位址列小圖示的引入
     { rel: 'stylesheet', type: 'text/css', href: 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css'},
  ],
  script: [
     {src: 'https://code.jquery.com/jquery-3.1.1.min.js'},
     {src: 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js'}
  ]
},
 

build: 這個配置項用來配置 Nuxt.js 專案的構建規則，即 Webpack 的構建配置，如通過 vendor 欄位引入第三方模組，通過 plugin 欄位配置 Webpack 外掛，通過 loaders 欄位自定義 Webpack 載入器等。通常我們會在 build 的 vendor 欄位中引入 axios 模組，從而在專案中進行 HTTP 請求（ axios 也是 Vue.js 官方推薦的 HTTP 請求框架）。

build: {
   vendor: ['core-js', 'axios'],
   loaders: [
     {
       test: /\.(scss|sass)$/,
       use: [{
         loader: "style-loader"
       }, {
         loader: "css-loader"
       }, {
         loader: "sass-loader"
       }]
     },
     {
       test: /\.(png|jpe?g|gif|svg)$/,
       loader: 'url-loader',
       query: {
         limit: 1000,
         name: 'img/[name].[hash:7].[ext]'
       }
     },
     {
       test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
       loader: 'url-loader',
       query: {
         limit: 1000,
         name: 'fonts/[name].[hash:7].[ext]'
       }
     }
   ]
 }
 

css: 在這個配置項中，引入全域性的 CSS 檔案，之後每個頁面都會被引入。

  css: [ //該配置項用於定義應用的全域性（所有頁面均需引用的）樣式檔案、模組或第三方庫。
    'element-ui/lib/theme-chalk/index.css',//在建立專案的時候安裝了elememt外掛，這裡自動引入外掛的預設樣式
    '@/assets/css/reset.css',   //引入assets下的reset.css全域性標籤重置樣式
    '@/assets/main.css'  //引入全域性的動畫樣式
  ],

router: 可以在此配置路由的基本規則，以及進行中介軟體的配置。例如，你可以建立一個用來獲取 User-Agent

loading: Nuxt.js 提供了一套頁面內載入進度指示元件，可以在此配置顏色，禁用，或是配置自定義的載入元件。

env: 可以在此配置用來在服務端和客戶端共享的全域性變數。

目錄即路由

Nuxt.js 在 vue-router 之上定義了一套自動化的生成規則，。例如，我們有以下目錄結構：

這個目錄下含有一個基礎路由（無引數）以及兩個動態路由（帶引數），Nuxt.js 會生成如下的路由配置表（可以在 .nuxt 目錄下的 router.js 檔案中找到）：

routes: [
  {
    path: "/",
    component: _abe13a78,
    name: "index"
  },
  {
    path: "/article/:id?",
    component: _48f202f2,
    name: "article-id"
  },
  {
    path: "/:page",
    component: _5ccbb43a,
    name: "page"
  }
]

對於 article-id 這個路由，路徑中帶有 :id? 引數，表明這是一個可選的路由，如果要將其設為必選，則必須在 article 的目錄下新增 index.vue 檔案。

再看下面一個例子:

由於有同名檔案和資料夾的存在，Nuxt.js 會為我們生成巢狀路由，生成的路由結構如下，在使用時，需要增加 <nuxt-child /> 標籤來顯示子檢視的內容。

routes: [
  {
    path: "/article",
    component: _f930b330,
    children: [
      {
        path: "",
        component: _1430822a,
        name: "article"
      },
      {
        path: ":id",
        component: _339e8013,
        name: "article-id"
      }
    ]
  }
]