如何在Nuxt3中修改__nuxt和__NUXT__全局标识名称？

问题说明 #

和《Hide nuxt Keyword》问题场景类似，但在Nuxt3环境下原有解决方案不生效。已尝试配置globalName等多项参数仍无效果，甚至favicon路径只能硬编码（资源路径问题已单独跟进）。当前使用的配置如下：

export default defineNuxtConfig({
    app: {
        head: {
            link: [{ rel: 'icon', type: 'image/png', href: '_nuxt/assets/favicon.png' }]
        }
    },
    globalName: 'mmmm',
    runtimeConfig: {
        globalName: 'ddd',
        globals: {
            id: '__pas',
            context: '__PAS__'
        }
    }
})

参考图示：

有效解决方案 #

Nuxt3中修改全局名称需要通过Vite配置覆盖默认变量，具体步骤如下：

1. 在nuxt.config.ts中添加Vite相关配置，通过Rollup选项和define替换全局标识：

export default defineNuxtConfig({
  app: {
    head: {
      link: [{ rel: 'icon', type: 'image/png', href: '/assets/favicon.png' }] // 修正favicon路径，无需硬编码_nuxt前缀
    }
  },
  vite: {
    build: {
      rollupOptions: {
        output: {
          // 替换nuxt相关全局模块名称
          globals: {
            'nuxt': 'mmmm',
            'nuxt/app': 'mmmm/app'
          }
        }
      }
    },
    // 替换全局标识变量
    define: {
      '__NUXT__': '__PAS__',
      '__NUXT_ID__': '__pas'
    }
  }
})

2. 清理Nuxt缓存后重启开发服务：

npx nuxi clean && npm run dev

补充说明 #

• Nuxt3不再支持Nuxt2中的globalName配置项，全局变量控制需通过Vite的Rollup配置和define选项实现。
• favicon路径无需硬编码_nuxt前缀，直接使用/assets/favicon.png即可，Nuxt会自动处理资源打包路径。

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