Skip to content

配置概览

· 4 min

配置即开发

关于 Nuxt 中的配置，可以查询官网：https://nuxt.com/docs/api/nuxt-config

元数据

一个应用会涉及到一些元数据：应用的标题、应用的图标…

app: {
  head: {
    meta: [
      { name: 'viewport', content: 'width=device-width, initial-scale=1' }
    ],
    link: [
      { rel: 'stylesheet', href: 'https://awesome-lib.css' }
    ],
  },
},

静态资源与样式

静态资源的目录有两个，一个是 public，另一个是 assets.

public 目录下的文件会原封不动地复制到最终生成的 dist 文件夹中，路径不会被 webpack 或 vite 等处理。可以通过 / 开头的绝对路径直接访问。例如，public/logo.png 可通过 /logo.png 访问。因此 public 适合存放不需要经过构建工具处理的资源，例如：

assets 目录下的文件会被 webpack 或 vite 等构建工具，通常会被打包、压缩、优化，并可能被重命名(带有 hash 值)。因此 assets 下的资源通常是在应用中通过 @/assets 引入，例如：

特性publicassets
访问方式直接通过 URL 访问必须通过代码引用
构建处理不会被构建工具处理会被构建工具处理
适用场景直接暴露的静态资源应用内部需要的静态资源
性能优化不会自动优化(保留原始文件)会被打包、优化、压缩

在配置文件中有个 css 的配置项，可以配置 css 资源路径：

css: [
  // Load a Node.js module directly (here it's a Sass file).
  'bulma',
  'bootstrap',
  // CSS file in the project
  // ~代表项目根目录
  '~/assets/css/main.css',
  // SCSS file in the project
  // 如果是 scss 或者 less 需要安装对应的 css 预处理器
  '~/assets/css/main.scss',
]

环境

Nuxt 针对各个环境有一套默认的配置，支持开发者重写这些配置项：

export default defineNuxtConfig({
  // 重写生产环境相关的配置，里面的配置项会覆盖默认的配置
  $production: {
    routeRules: {
      '/**': { isr: true },
    },
    nitro: {
      preset: 'vercel',
    },
  },
  // 重写开发环境相关配置
  $development: {
    vite: {
      server: {
        proxy: {
          '/api': 'http://localhost:3001',
        },
      },
    },
  },
  // 除了重写开发和生产环境配置，还可以自定义环境
  $env: {
    // 预发布环境
    staging: {
      apiBaseUrl: '.....',
    },
    // 测试环境
    test: {
      apiBaseUrl: '.....',
    },
  },
})

回头在启动应用的时候，可以指定需要的环境：

Terminal window
nuxi build --envName staging

构建工具

Nuxt3 支持两种构建工具，一个是 Vite，这个是默认的:

export default defineNuxtConfig({
  vite: {
    // 这里面就是直接对接 vite 配置项
    vue: {
      customElement: true,
    },
    server: {
      proxy: {
        '/api': {
          target: 'http://localhost:7001',
          changeOrigin: true,
          rewrite: (path) => path.replace(/^\/api/, ''),
        },
      },
    },
  },
})

另一个是 Webpack:

export default defineNuxtConfig({
  webpack: {
    loaders: {
      vue: {
        hotReload: true,
      },
    },
  },
})

模块

模块为 Nuxt 提供了高度可扩展的特性，很多周边生态都是以模块的形式和 Nuxt 结合的。安装了模块后，需要在配置文件中添加该模块的配置，例如：

modules: ["@element-plus/nuxt", "@pinia/nuxt"],