Nuxt.js 项目配置详解：从基础到高级技巧

Nuxt.js 项目配置详解：从基础到高级技巧

website-v2 Nuxt 2 Documentation Website 项目地址: https://gitcode.com/gh_mirrors/we/website-v2

前言

在 Nuxt.js 项目中，nuxt.config.js 文件是整个应用配置的核心。本文将全面解析 Nuxt.js 的配置系统，帮助开发者掌握从基础样式配置到高级 Webpack 定制的各项技巧。

基础配置

CSS 资源管理

Nuxt.js 允许在配置文件中全局定义 CSS 资源，这些资源会自动包含在每个页面中：

export default {
  css: [
    // 直接加载 Node.js 模块
    'bulma',
    // 项目中的 CSS 文件
    '~/assets/css/main.css',
    // 项目中的 SCSS 文件
    '~/assets/css/main.scss'
  ]
}

注意事项：

• 使用 Sass 需要先安装 sass 和 sass-loader 依赖包
• Nuxt 会根据文件扩展名自动识别预处理器类型
• 文件扩展名可以省略，但要注意同名文件加载顺序问题

样式扩展优先级

当省略文件扩展名时，Nuxt 会按照默认顺序查找匹配的文件：

['css', 'pcss', 'postcss', 'styl', 'stylus', 'scss', 'sass', 'less']

预处理器配置

在 Vue 单文件组件中，可以通过 lang 属性指定模板和样式的预处理器：

<template lang="pug">
  h1.red Hello {{ name }}!
</template>

<style lang="scss">
  .red {
    color: red;
  }
</style>

安装对应加载器：

npm install --save-dev pug pug-plain-loader
npm install --save-dev sass sass-loader@10

外部资源管理

全局资源引入

在 nuxt.config.js 中配置全局资源：

export default {
  head: {
    script: [
      { src: 'https://cdn.example.com/libs/jquery/3.1.1/jquery.min.js' }
    ],
    link: [
      { rel: 'stylesheet', href: 'https://fonts.example.com/css?family=Roboto' }
    ]
  }
}

页面级资源引入

在特定页面组件中引入资源：

export default {
  head() {
    return {
      script: [
        { src: 'https://cdn.example.com/libs/jquery/3.1.1/jquery.min.js' }
      ],
      link: [
        { rel: 'stylesheet', href: 'https://fonts.example.com/css?family=Roboto' }
      ]
    }
  }
}

PostCSS 配置

在 nuxt.config.js 中配置 PostCSS 插件：

export default {
  build: {
    postcss: {
      plugins: {
        'postcss-url': false,
        'postcss-nested': {},
        'postcss-responsive-type': {},
        'postcss-hexrgba': {}
      },
      preset: {
        autoprefixer: {
          grid: true
        }
      }
    }
  }
}

JSX 支持

Nuxt.js 内置支持 JSX 语法，可以直接在组件中使用：

export default {
  data() {
    return { name: 'World' }
  },
  render() {
    return <h1 class="red">{this.name}</h1>
  }
}

特点：

• 自动注入 h = this.$createElement
• 基于 Vue 官方的 Babel 预设
• 支持所有 Vue 渲染函数特性

文件忽略策略

.nuxtignore 文件

类似于 .gitignore，可以指定忽略构建的文件：

# 忽略特定布局文件
layouts/foo.vue

# 忽略匹配模式的文件
pages/ignore/*.vue

# 忽略特定 store 文件
store/baz.js

配置忽略规则

export default {
  ignore: 'pages/bar.vue', // 直接忽略特定文件
  ignorePrefix: '-',       // 默认忽略以 - 开头的文件
  ignoreOptions: {         // 忽略选项配置
    ignorecase: false
  }
}

Webpack 高级配置

扩展 Webpack 配置

export default {
  build: {
    extend(config, { isDev, isClient }) {
      // 添加自定义 loader
      config.module.rules.push({
        test: /\.(ttf|eot|svg|woff(2)?)(\?[a-z0-9=&.]+)?$/,
        loader: 'file-loader'
      })
      
      // 开发模式特定配置
      if (isDev) {
        config.mode = 'development'
      }
    }
  }
}

添加 Webpack 插件

import webpack from 'webpack'

export default {
  build: {
    plugins: [
      new webpack.ProvidePlugin({
        $: 'jquery',
        _: 'lodash'
      })
    ]
  }
}

音频文件处理

export default {
  build: {
    extend(config) {
      config.module.rules.push({
        test: /\.(ogg|mp3|wav|mpe?g)$/i,
        loader: 'file-loader',
        options: {
          name: '[path][name].[ext]'
        }
      })
    },
    loaders: {
      vue: {
        transformAssetUrls: {
          audio: 'src'
        }
      }
    }
  }
}

开发服务器配置

修改主机和端口

export default {
  server: {
    host: '0',    // 设置为 '0' 或 '0.0.0.0' 允许外部访问
    port: 8000    // 自定义端口号
  }
}

推荐做法： 通过命令行参数配置更灵活：

HOST=0 PORT=8000 npm run dev

或在 package.json 中添加脚本：

"scripts": {
  "dev:host": "nuxt --hostname '0' --port 8000"
}

异步配置

nuxt.config.js 支持异步配置：

import axios from 'axios'

export default async () => {
  const { data } = await axios.get('https://api.example.com/config')
  return {
    head: {
      title: data.title
      // 其他配置...
    }
  }
}

总结

Nuxt.js 的配置系统既强大又灵活，本文涵盖了从基础样式管理到高级 Webpack 定制的各个方面。掌握这些配置技巧，可以帮助开发者根据项目需求进行精确调整，构建出更高效、更符合业务需求的 Nuxt.js 应用。

website-v2 Nuxt 2 Documentation Website 项目地址: https://gitcode.com/gh_mirrors/we/website-v2