如何在Nuxt 3中移除默认的<meta charset="utf-8">标签？

直接在nuxt.config.ts里设置charset: null不生效，是因为Nuxt 3的头部管理依赖unhead，这个默认标签由unhead自动注入，需要通过自定义配置或插件来移除。

方式一：通过nuxt.config.ts配置覆盖 #

在配置文件中关闭自动charset注入，并自定义头部meta内容：

export default defineNuxtConfig({
  charset: false,
  app: {
    head: {
      meta: [
        // 仅保留你需要的meta标签，比如viewport
        { name: 'viewport', content: 'width=device-width, initial-scale=1' }
      ]
    }
  }
})

方式二：使用Nuxt插件动态移除 #

1. 在项目plugins目录下创建remove-charset.ts文件：

export default defineNuxtPlugin((nuxtApp) => {
  if (process.server) {
    nuxtApp.hook('app:rendered', () => {
      // 过滤掉charset为utf-8的meta标签
      nuxtApp.$head.meta = nuxtApp.$head.meta.filter(meta => meta.charset !== 'utf-8')
    })
  }
})

2. 插件会被Nuxt自动注册，无需额外配置。

注意：移除<meta charset="utf-8">可能导致页面编码异常，仅在有明确需求时操作。

内容的提问来源于stack exchange，提问作者Alan