Nuxt3(3.8.x)版本的环境变量设置

1. 创建.env.development / .env.production

#.env.development
NUXT_BASE_API_URL=http://www.dev.com
NUXT_API_X_KEY=aga987sdjfs0sxkjggsa0
NUXT_ENVIRONMENT=development

#.env.production
NUXT_BASE_API_URL=http://www.prod.com
NUXT_API_X_KEY=fsfdsdkfjskdjfs8wef89sf
NUXT_ENVIRONMENT=production

2. 修改package.json

Nuxt CLI 在开发模式以及运行 nuxi build 和 nuxi generate 时，内置了 dotenv 的支持。

除了任何进程环境变量之外，如果你的项目根目录下有一个 .env 文件，它将会在 开发、构建和生成时 自动加载。在你的 nuxt.config 文件和模块中可以访问在这里设置的任何环境变量。

"scripts": {
  "dev": "nuxt dev --dotenv .env.development",
  "prod": "nuxt dev --dotenv .env.production",
  "build:dev": "nuxt build --dotenv .env.development",
  "build:prod": "nuxt build --dotenv .env.production",
  "generate:dev": "nuxt generate  --dotenv .env.development",
  "generate:prod": "nuxt generate --dotenv .env.production",
  "preview": "nuxt preview",
  "postinstall": "nuxt prepare"
},

3. 运行&打包

• (pnpm run dev | prod) dev: 开发环境 | prod: 生产环境

<script lang="ts" setup>
const {
  public: { apiXKey, baseApiUrl, isDev },
} = useRuntimeConfig();

onMounted(() => {
  console.log("apiXkey = ", apiXKey, " | baseApiUrl = ", baseApiUrl, " | isDev = ", isDev);
  // apiXkey =  aga987sdjfs0sxkjggsa0  | baseApiUrl =  http://www.dev.com  | isDev =  true
});
</script>true

• (pnpm run build:dev | build:prod) build:dev 打包开发环境 | build:prod 打包生产环境

• (pnpm run generate:dev | generate:prod) generate:dev 生成开发环境的静态资源文件 | generate: 生成生产环境的静态资源文件

4. useRuntimeConfig & process

** 使用这种方式的话，在process中的dev和NODE_ENV是不生效的 **

所以使用--dot-env命令的话就在.env.*中自定义好所需要的变量即可。

可以看到当我运行 pnpm run prod 时，获取到的process

发现NODE_ENV仍然是development, dev还是true.