nextjs13配置多个环境，打包不同的环境变量

目录

一、在根目录配置环境变量文件

二、修改打包命令

三、在next.config.js当中配置环境变量字段

---

我们部署的时候有测试环境，预生产、灰度、生产等多个环境，不同的环境，有些配置是不一样 如url、或者其他的配置。

一开始我看到文档说 NODE_ENV === development环境，加载的是.env.development，同理 production 加载的是.env.production，那么我只要设置NODE_ENV 在不同环境下是不同的值即可。

但是经过测试，我发现 只要是 build 的命令，next的环境变量 NODE_ENV 一直都是production，覆盖不了，所以这种方式行不通，只能在增加一个环境变量来区分。

所以还是只能通过老办法，通过cross-env传递变量，然后在 next 的配置文件中写入到nextjs 中，在通过 process.env.xx 使用即可。

一、在根目录配置环境变量文件

安装cross-env依赖

pnpm add cross-env -D

创建三个环境变量文件 .env.development、.env.production、.env.test，里面的内容分别是：

BUILD_ENV=development、BUILD_ENV=production、BUILD_ENV=test

二、修改打包命令

在package.json当中，修改打包命令：

 "scripts": {
    "dev": "cross-env BUILD_ENV=development pnpm open-browser && next dev -p 8099",
    "dev:test": "cross-env BUILD_ENV=test  next dev -p 8099",
    "open-browser": "start http://localhost:8099",
    "build:test": "cross-env BUILD_ENV=test next build",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },

三、在next.config.js当中配置环境变量字段

module.exports = (phase) => {
  console.log(' ~ file: next.config.js:15 ~ phase:', phase);
  return {
   ...
    env: {
      BUILD_ENV: process.env.BUILD_ENV || 'test',
      buildTime: new Date().toLocaleString()
    },
    ....
  };
};

运行pnpm build:test命令，获取到BUILD_ENV变量的值：test

获取到test,就算成功。