在 NUXT 3 中找不到 UseRuntimeConfig

Question

根据NUXT文档我需要在defineNuxtConfig中使用runtimeConfig来设置和获取环境变量。

但是，当尝试执行此操作时，我收到错误，提示 useRuntimeConfig 未定义。这里可能有什么问题？我在 NX monorepo 中使用 NUXT。

package.json：

  {
    "name": "@smikkelweb/source",
    "version": "0.0.0",
    "license": "MIT",
    "scripts": {
      "lint": "nx run-many --target=lint --all",
      "dev": "nx run-many --target=serve --all",
      "build": "nx run-many --target=build --all",
      "start": "nx run-many --target=serve:production",
      "stop": "pm2 stop all && pm2 delete all && pm2 flush",
      "start:production": "pm2 start ecosystem.config.js --env production"
    },
    "private": true,
    "devDependencies": {
      "@nuxt/devtools": "1.0.0",
      "@nuxt/eslint-config": "0.2.0",
      "@nuxt/kit": "^3.10.0",
      "@nuxt/ui-templates": "^1.3.1",
      "@nuxtjs/tailwindcss": "^6.11.3",
      "@nx/eslint": "18.0.2",
      "@nx/eslint-plugin": "18.0.2",
      "@nx/express": "18.0.3",
      "@nx/jest": "18.0.2",
      "@nx/js": "18.0.3",
      "@nx/node": "18.0.3",
      "@nx/nuxt": "^18.0.2",
      "@nx/vite": "18.0.2",
      "@nx/web": "18.0.2",
      "@nx/webpack": "18.0.3",
      "@nx/workspace": "18.0.2",
      "@pmmmwh/react-refresh-webpack-plugin": "^0.5.7",
      "@svgr/webpack": "^8.0.1",
      "@swc-node/register": "~1.6.7",
      "@swc/core": "~1.3.85",
      "@swc/helpers": "~0.5.2",
      "@types/cors": "^2.8.17",
      "@types/jest": "^29.4.0",
      "@types/morgan": "^1.9.9",
      "@types/node": "~18.16.9",
      "@typescript-eslint/eslint-plugin": "^6.13.2",
      "@typescript-eslint/parser": "^6.13.2",
      "eslint": "~8.48.0",
      "eslint-config-prettier": "^9.0.0",
      "flowbite-nuxt": "^0.0.3",
      "h3": "^1.8.2",
      "jest": "^29.4.1",
      "jest-environment-node": "^29.4.1",
      "nuxt": "^3.10.1",
      "nx": "18.0.2",
      "prettier": "^2.6.2",
      "react-refresh": "^0.10.0",
      "sass": "1.62.1",
      "ts-jest": "^29.1.0",
      "ts-node": "^10.9.1",
      "typescript": "~5.3.2",
      "url-loader": "^4.1.1",
      "vue": "^3.3.4",
      "vue-router": "^4.2.4",
      "vue-tsc": "^1.8.8"
    },
    "dependencies": {
      "@pinia/nuxt": "^0.5.1",
      "axios": "^1.6.0",
      "bcryptjs": "^2.4.3",
      "cors": "^2.8.5",
      "express": "^4.18.1",
      "flowbite": "^2.2.1",
      "flowbite-vue": "^0.1.2",
      "jsonwebtoken": "^9.0.2",
      "mongoose": "^8.1.1",
      "morgan": "^1.10.0",
      "nodemailer": "^6.9.9",
      "nuxt-nightly": "^3.10.2-28458525.fd671a27",
      "nuxt3": "^3.8.0-28284309.b3d3d7f4",
      "pinia": "^2.1.7",
      "slugify": "^1.6.6",
      "tslib": "^2.3.0",
      "validator": "^13.11.0",
      "webpack": "^5.90.1",
      "webpack-cli": "^5.1.4"
    }
  }

我尝试过全新安装，更新打字稿，但无济于事。

Answer 1

这是您的

nuxt.config.ts

文件的运行时配置工作示例：

export default defineNuxtConfig({
  runtimeConfig: {
    // The private keys which are only available within server-side
    secretConfig: 'foo',
    // You can set runtimeConfig variables from process.env
    fromEnv: process.env.YOUR_ENV_VAR,
    // Keys within public, will be also exposed to the client-side
    public: {
      apiBase: '/api'
    }
  }
})

如果您使用的是节点

v20

或更新版本，您可以将 env 文件传递到命令中，如下所示：

node --env-file=.env script.js

但是如果您使用旧的节点版本，您可以使用

dot-env

包读取环境变量 https://www.npmjs.com/package/dotenv