Nuxt v3如何访问package.json变量？遇取值异常问题求助

问题背景 #

在Nuxt2中可通过process.env.npm_package_name、process.env.npm_package_description这类变量直接访问package.json字段，但迁移到Nuxt3后，将这些变量配置到publicRuntimeConfig中时，仅NPM_PACKAGE_NAME能正常取值，NPM_PACKAGE_DESCRIPTION显示未定义，甚至调试控制台里的process.env对象中找不到这些npm_package_*前缀的变量。

原因分析 #

Nuxt2通常通过npm脚本（如npm run dev）启动，此时npm会自动将package.json字段以npm_package_为前缀注入环境变量；但Nuxt3的nuxi命令是直接通过Node.js执行的，不会触发npm的环境变量注入逻辑，因此process.env中不存在这些自动生成的变量。

可行解决方案 #

方案1：直接读取package.json文件（推荐） #

跳过依赖npm注入环境变量的方式，直接在nuxt.config.ts中导入package.json并提取所需字段：

// nuxt.config.ts
import pkg from './package.json'

export default defineNuxtConfig({
  publicRuntimeConfig: {
    NPM_PACKAGE_NAME: pkg.name,
    NPM_PACKAGE_DESCRIPTION: pkg.description
  },
  // 其他配置...
})

这种方式不受启动方式影响，无论用npm run dev还是nuxi dev启动项目，都能稳定获取package.json中的所有字段。

方案2：确保通过npm脚本启动项目 #

如果坚持使用npm_package_*环境变量，需在package.json中配置启动脚本，再通过npm命令启动：

// package.json
{
  "scripts": {
    "dev": "nuxi dev",
    "build": "nuxi build"
  }
}

之后用npm run dev启动项目，npm会自动注入npm_package_*系列环境变量，配置的publicRuntimeConfig就能正常取值。但这种方式有局限性：若用户直接用nuxi dev启动，环境变量依然无法注入。

验证 #

配置完成后，app.vue中通过useRuntimeConfig()获取变量的逻辑无需修改，即可正常获取NPM_PACKAGE_NAME和NPM_PACKAGE_DESCRIPTION的值：

<script setup lang="ts">
const config = useRuntimeConfig();
useHead({
  title: config.NPM_PACKAGE_NAME || '',
  meta: [
    { name: 'description', content: config.NPM_PACKAGE_DESCRIPTION || '' }
  ]
});
</script>

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