Nuxt.js配置全解析：从基础到高级实践

1. Nuxt.js 配置完全指南

作为一名长期使用Nuxt.js的前端开发者，我深知合理的配置对项目的重要性。Nuxt.js的配置文件就像项目的DNA，决定了整个应用的架构和行为模式。今天我将分享多年实战中总结的Nuxt配置经验，从基础到进阶，帮你避开那些我踩过的坑。

2. 核心配置文件解析

2.1 nuxt.config.js 文件结构

每个Nuxt项目根目录下的nuxt.config.js都是配置的核心。这个ES模块导出的对象包含了所有可配置项：

javascript复制export default {
  // 应用模式
  ssr: true,
  // 目标部署环境
  target: 'server',
  // 全局CSS
  css: [],
  // 插件配置
  plugins: [],
  // 模块配置
  modules: [],
  // 构建配置
  build: {}
}

重要提示：每次修改配置后需要重启开发服务器才能生效

2.2 常用基础配置项

2.2.1 应用元信息

javascript复制head: {
  title: '我的Nuxt应用',
  meta: [
    { charset: 'utf-8' },
    { name: 'viewport', content: 'width=device-width, initial-scale=1' }
  ]
}

2.2.2 全局CSS/SCSS配置

javascript复制css: [
  '~/assets/css/main.css',
  '~/assets/scss/variables.scss'
],

styleResources: {
  scss: './assets/scss/_variables.scss'
}

3. 环境变量与多环境配置

3.1 环境变量管理

Nuxt使用@nuxtjs/dotenv模块管理环境变量：

1. 安装依赖：

bash复制npm install @nuxtjs/dotenv

2. 在nuxt.config.js中添加：

javascript复制buildModules: [
  '@nuxtjs/dotenv'
],

3. 创建.env文件：

code复制API_BASE_URL=https://api.example.com

3.2 多环境配置策略

我通常采用以下目录结构管理不同环境配置：

code复制/config
  |- development.js
  |- production.js
  |- staging.js

在nuxt.config.js中动态加载：

javascript复制const env = require('./config/' + process.env.NODE_ENV + '.js')

export default {
  publicRuntimeConfig: {
    ...env
  }
}

4. 模块系统配置技巧

4.1 常用模块推荐

javascript复制modules: [
  '@nuxtjs/axios',
  '@nuxtjs/auth',
  '@nuxtjs/pwa',
  '@nuxtjs/sitemap'
]

4.2 模块配置示例

以axios模块为例：

javascript复制axios: {
  baseURL: process.env.API_BASE_URL,
  proxy: true,
  retry: { retries: 3 }
},

proxy: {
  '/api/': { target: 'http://localhost:3001', pathRewrite: {'^/api/': ''} }
}

5. 构建优化配置

5.1 打包体积优化

javascript复制build: {
  analyze: true,
  optimization: {
    splitChunks: {
      chunks: 'all'
    }
  },
  babel: {
    plugins: [
      ['@babel/plugin-proposal-decorators', { legacy: true }]
    ]
  }
}

5.2 性能优化实践

javascript复制render: {
  compressor: { threshold: 0 },
  etag: false,
  http2: {
    push: true
  }
}

6. 路由与中间件配置

6.1 自定义路由规则

在nuxt.config.js中：

javascript复制router: {
  extendRoutes(routes, resolve) {
    routes.push({
      path: '/