您正在浏览 Nuxt 2 文档。前往 Nuxt 3 文档， 或了解更多关于 Nuxt 2 长期支持。

render 属性

Nuxt 允许自定义页面渲染的运行时选项。

bundleRenderer

  • 类型: Object

使用此选项自定义 Vue SSR bundle 渲染器。设置了 ssr: false 时跳过此选项。

nuxt.config.js
export default {
  render: {
    bundleRenderer: {
      directives: {
        custom1(el, dir) {
          // 某些操作...
        }
      }
    }
  }
}

有关可用选项的详情，请参阅 Vue SSR API 参考 。建议不要使用此选项，因为 Nuxt 已提供最佳 SSR 默认配置，错误配置可能导致 SSR 问题。

etag

  • 类型: Object
    • 默认值: { weak: true }

要禁用页面的 etag，请设置 etag: false。

有关可用选项，请参阅 etag 文档。

可以通过指定 etag.hash 使用自定义哈希函数：

nuxt.config.js
import { murmurHash128 } from 'murmurhash-native'

export default {
  render: {
    etag: {
      hash: html => murmurHash128(html)
    }
  }
}

此示例对较大的 HTML body 使用更快的 murmurhash-native 。注意指定自定义哈希函数时，weak 选项会被忽略。

compressor

  • 类型: Object
    • 默认值: { threshold: 0 }

提供对象时，compression 中间件会使用相应选项。

如果想使用自己的压缩中间件，可以直接引用（如 otherComp({ myOptions: 'example' })）。

要禁用压缩，请设置 compressor: false。

fallback

  • 类型: Object
    • 默认值: { dist: {}, static: { skipUnknown: true } }
    • dist 键用于匹配 publicPath 的路由（如 /_nuxt/*）
    • static 键用于匹配 /* 的路由

dist 和 static 的值会转发给 serve-placeholder 中间件。

如果想禁用其中一个或两个，可以传入假值。

允许路由中使用 .js 扩展名的示例（如 /repos/nuxt.js）：

nuxt.config.js
export default {
  render: {
    fallback: {
      static: {
        // 避免对这些扩展名发送 404
        handlers: {
          '.js': false
        }
      }
    }
  }
}

http2

  • 类型: Object
    • 默认值: { push: false, pushAssets: null }

启用 HTTP2 推送头。

可以使用 pushAssets 函数控制要推送的链接。

示例：

pushAssets: (req, res, publicPath, preloadFiles) =>
  preloadFiles
    .filter(f => f.asType === 'script' && f.file === 'runtime.js')
    .map(f => `<${publicPath}${f.file}>; rel=preload; as=${f.asType}`)

也可以向数组添加自己的资源，使用 req 和 res 根据请求头决定要推送的链接，例如使用应用程序版本的 cookie。

资源会用 , 连接并作为单个 Link 头传递。

asyncScripts

  • 类型: Boolean
    • 默认值: false

为 Nuxt bundle 的 <script> 标签添加 async 属性，允许在解析时并行获取（v2.14.8 及以上可用）。详情请参阅此处 。

injectScripts

  • 类型: Boolean
    • 默认值: true

为 Nuxt bundle 添加 <script>（v2.8.0 及以上可用）。设为 false 可渲染不含 JS 的纯 HTML。

resourceHints

  • 类型: Boolean
    • 默认值: true

添加 prefetch 和 preload 链接以加快初始页面加载时间。

只有在页面和路由较多时才建议禁用此选项。

ssr

  • 类型: Boolean
    • 默认值: true
    • 仅客户端渲染时为 false

启用 SSR 渲染。

如果未指定此选项，会根据全局 ssr 值自动设置。这对于在镜像构建后（如 Docker 中）在运行时动态启用/禁用 SSR 很有用。

crossorigin

  • 类型: String
    • 默认值: undefined

    在生成的 HTML 中的 <link rel="stylesheet"> 和 <script> 标签上设置 crossorigin 属性。
    详情：CORS 属性

ssrLog

  • 类型: Boolean | String
    • 默认值: 开发模式为 true，生产模式为 false

将服务端日志转发到浏览器以便调试（仅开发模式可用）。

设为 'collapsed' 可折叠日志。

static

  • 类型: Object
    • 默认值: {}

配置 static/ 目录的行为

有关可用选项，请参阅 serve-static 文档。

此外，还引入了默认为 true 的 prefix 选项，用于向静态资源添加 router base。

示例：

  • 资源: favicon.ico
  • Router base: /t
  • prefix: true（默认）: /t/favicon.ico
  • prefix: false: /favicon.ico

注意：

某些 URL 重写可能不遵守前缀。

dist

  • 类型: Object
    • 默认值: { maxAge: '1y', index: false }

用于部署分发文件的选项，仅在生产环境中应用。

有关可用选项，请参阅 serve-static 文档。

csp

  • 类型: Boolean 或 Object
    • 默认值: false

使用此选项配置 Content-Security-Policy 以加载外部资源

前提条件：

这些 CSP 设置仅在使用 target: 'server' 为 Nuxt 提供 SSR 应用程序时有效。csp.policy 中定义的策略会添加到响应的 Content-Security-Policy HTTP 头中。

配置更新：

这些设置由 Nuxt 服务器直接从 nuxt.config.js 读取，这意味着这些设置的更改在服务器重启时生效，无需重新构建应用程序即可更新 CSP 设置。

HTML meta 标签：

要在 <head> 中添加 <meta http-equiv="Content-Security-Policy"/> ，需要将 csp.addMeta 设为 true。注意此功能与 csp.policies 的配置无关：

  • 只添加 script-src 类型的策略
  • script-src 策略只包含内联 <script> 标签的哈希值

将 csp.addMeta 设为 true 时，定义的完整策略集仍会添加到 HTTP 响应头中。

注意，如果 script-src 策略包含 'unsafe-inline'，CSP 哈希不会作为 <meta> 添加，因为浏览器在存在哈希时会忽略 'unsafe-inline'。如果需要同时使用 'unsafe-inline' 和哈希以兼容 CSPv1，请将 unsafeInlineCompatibility 选项设为 true，此时 <meta> 标签只包含内联 <script> 标签的哈希，csp.policies 中定义的策略用于 Content-Security-Policy HTTP 响应头。

nuxt.config.js
export default {
  render: {
    csp: true
  }
}

// 或

export default {
  render: {
    csp: {
      hashAlgorithm: 'sha256',
      policies: {
        'script-src': [
          'https://www.google-analytics.com',
          'https://name.example.com'
        ],
        'report-uri': ['https://report.example.com/report-csp-violations']
      },
      addMeta: true
    }
  }
}

// 或
/*
  以下示例允许 Google Analytics、LogRocket.io 和 Sentry.io
  进行日志记录和跟踪分析。

  查看 Sentry.io 博客了解应使用哪些跟踪链接
  https://blog.sentry.io/2018/09/04/how-sentry-captures-csp-violations
*/
const PRIMARY_HOSTS = `loc.example-website.com`
export default {
  render: {
    csp: {
      reportOnly: true,
      hashAlgorithm: 'sha256',
      policies: {
        'default-src': ["'self'"],
        'img-src': ['https:', '*.google-analytics.com'],
        'worker-src': ["'self'", `blob:`, PRIMARY_HOSTS, '*.logrocket.io'],
        'style-src': ["'self'", "'unsafe-inline'", PRIMARY_HOSTS],
        'script-src': [
          "'self'",
          "'unsafe-inline'",
          PRIMARY_HOSTS,
          'sentry.io',
          '*.sentry-cdn.com',
          '*.google-analytics.com',
          '*.logrocket.io'
        ],
        'connect-src': [PRIMARY_HOSTS, 'sentry.io', '*.google-analytics.com'],
        'form-action': ["'self'"],
        'frame-ancestors': ["'none'"],
        'object-src': ["'none'"],
        'base-uri': [PRIMARY_HOSTS],
        'report-uri': [
          `https://sentry.io/api/<project>/security/?sentry_key=<key>`
        ]
      }
    }
  }
}
Edit this page on GitHub Updated at Tue, Apr 14, 2026