手把手教学 nextjs中环境变量的详细处理

手把手教学 nextjs中环境变量的详细处理

官网只有dev和prod的环境变量判断，再次增加test环境变量和开发环境中调用线上接口的方法，然后再服务端和客户端都可以获取到环境变量了。

1.创建.env文件

首先在根目录下创建3个.env文件

// .env.development
APP_ENV=development// .st
APP_ENV=test// .env.production
APP_ENV=production

2.配置fig.js

3.配置package.json

"scripts": {"dev": "APP_ENV=development next dev",// 开发环境中调用线上接口"dev:prod": "APP_ENV=production next dev",// 打测试包"build:test": "APP_ENV=test next build","build:prod": "APP_ENV=production next build","start": "next start","lint": "next lint"},

4.使用

// 根据环境变量修改host
const prodHost = '';
const testHost = '';// 全局可获取v.APP_ENV
let appEnv = v.APP_ENV;
let host = appEnv=='production'? prodHost : testHost;