Nuxt.js 的 nuxt.config.js 文件中有哪些常用配置？

推荐答案

在 nuxt.config.js 文件中，常用的配置项包括：

1. head: 配置页面的 <head> 标签内容，如标题、meta 标签等。
2. css: 定义全局的 CSS 文件或库。
3. plugins: 配置 Nuxt.js 插件。
4. modules: 配置 Nuxt.js 模块。
5. buildModules: 配置仅在开发环境中使用的模块。
6. build: 自定义 Webpack 构建配置。
7. router: 自定义 Vue Router 配置。
8. generate: 配置静态站点生成器的行为。
9. env: 定义环境变量。
10. loading: 自定义页面加载指示器。
11. server: 配置服务器相关设置，如端口、主机等。
12. target: 定义应用的部署目标（如 server 或 static）。

本题详细解读

head

head 配置项用于设置页面的 <head> 标签内容。你可以在这里定义页面的标题、meta 标签、脚本、样式等。例如：

// www.javascriptcn.com code example
export default {
  head: {
    title: 'My Nuxt App',
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' }
    ],
    link: [
      { rel: 'stylesheet', href: 'https://fonts.googleapis.com/css?family=Roboto' }
    ]
  }
}

css

css 配置项用于引入全局的 CSS 文件或库。你可以在这里指定 CSS 文件的路径或直接引入第三方库。例如：

export default {
  css: [
    '~/assets/css/main.css',
    'bulma/css/bulma.css'
  ]
}

plugins

plugins 配置项用于注册 Nuxt.js 插件。插件可以是 Vue 插件、自定义指令、过滤器等。例如：

export default {
  plugins: [
    '~/plugins/vue-notifications.js',
    { src: '~/plugins/axios.js', mode: 'client' }
  ]
}

modules

modules 配置项用于引入 Nuxt.js 模块。模块可以扩展 Nuxt.js 的功能，如添加新的 API、集成第三方服务等。例如：

export default {
  modules: [
    '@nuxtjs/axios',
    '@nuxtjs/auth'
  ]
}

buildModules

buildModules 配置项用于引入仅在开发环境中使用的模块。这些模块通常用于开发工具或调试。例如：

export default {
  buildModules: [
    '@nuxtjs/eslint-module',
    '@nuxtjs/stylelint-module'
  ]
}

build

build 配置项用于自定义 Webpack 构建配置。你可以在这里修改 Webpack 的默认配置，如添加自定义加载器、插件等。例如：

// www.javascriptcn.com code example
export default {
  build: {
    extend(config, { isDev, isClient }) {
      if (isDev && isClient) {
        config.module.rules.push({
          enforce: 'pre',
          test: /\.(js|vue)$/,
          loader: 'eslint-loader',
          exclude: /(node_modules)/
        })
      }
    }
  }
}

router

router 配置项用于自定义 Vue Router 的配置。你可以在这里修改路由模式、添加路由守卫等。例如：

// www.javascriptcn.com code example
export default {
  router: {
    middleware: 'auth',
    extendRoutes(routes, resolve) {
      routes.push({
        name: 'custom',
        path: '*',
        component: resolve(__dirname, 'pages/404.vue')
      })
    }
  }
}

generate

generate 配置项用于配置静态站点生成器的行为。你可以在这里定义生成的路由、动态路由等。例如：

export default {
  generate: {
    routes: [
      '/users/1',
      '/users/2'
    ]
  }
}

env

env 配置项用于定义环境变量。这些变量可以在应用中使用。例如：

export default {
  env: {
    baseUrl: process.env.BASE_URL || 'http://localhost:3000'
  }
}

loading

loading 配置项用于自定义页面加载指示器。你可以在这里修改加载指示器的样式、行为等。例如：

export default {
  loading: {
    color: '#3B8070',
    height: '5px'
  }
}

server

server 配置项用于配置服务器相关设置，如端口、主机等。例如：

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

target

target 配置项用于定义应用的部署目标。你可以选择 server（默认）或 static（静态站点）。例如：

export default {
  target: 'static'
}