Nuxt.js 项目配置详解：从基础到高级实践-CSDN博客

本文链接：https://blog.csdn.net/gitblog_00988/article/details/148889696

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

前言

在 Nuxt.js 项目中，配置系统是整个应用的核心部分，它决定了框架的行为方式和功能特性。本文将全面解析 Nuxt.js 的配置机制，帮助开发者掌握从基础配置到高级定制的各项技巧。

基础配置

配置文件概述

Nuxt.js 默认提供了一套开箱即用的配置，适用于大多数应用场景。这些默认配置可以通过项目根目录下的 nuxt.config.js 文件进行覆盖和扩展。

CSS 资源配置

Nuxt.js 允许我们全局定义需要加载的 CSS 资源：

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

注意事项：

使用 SASS 需要先安装 node-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

JSX 支持

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

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

技术细节：

基于 @nuxt/babel-preset-app
自动注入 h 函数
符合 Vue 官方 JSX 规范

文件忽略机制

.nuxtignore 文件

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

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

# 忽略页面文件
pages/bar.vue
pages/ignore/*.vue

# 忽略 store 文件
store/baz.js
store/ignore/_.test._

# 忽略 middleware 文件
middleware/foo/*.js !middleware/foo/bar.js

其他忽略方式

ignorePrefix：默认忽略以 - 开头的文件
ignore：通过 glob 模式指定忽略文件
ignoreOptions：配置 node-ignore 选项

export default {
  ignore: 'pages/bar.vue',
  ignoreOptions: {
    ignorecase: false
  }
}

Webpack 高级配置

扩展 Webpack 配置

通过 build.extend 可以自定义 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'
      }
    }
  }
}

代码分割优化

自定义代码分割策略：

export default {
  build: {
    extend(config, { isClient }) {
      if (isClient) {
        config.optimization.splitChunks.maxSize = 200000
      }
    }
  }
}

开发环境 ESLint 检查

在开发时自动进行代码规范检查：

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)/
        })
      }
    }
  }
}

服务器配置

修改开发服务器设置

export default {
  server: {
    host: '0', // 默认: localhost
    port: 8000 // 默认: 3000
  }
}

注意事项：

host: '0' 或 '0.0.0.0' 允许局域网访问
也可以通过命令行参数设置：
```
HOST=0 PORT=8000 npm run dev
```

异步配置

支持异步获取配置：

import axios from 'axios'

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