react——环境变量（一）

秋叶等不到花开耶
613 阅读2分钟

一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第20天，点击查看活动详情。

在实际开发中，前端er会面对多个环境的接口：开发环境、测试环境、生产环境...这些环境最终要的区别是API的URL不同，所以代码中不能将URL写死，而是要根据不同的环境配置。

注：create-react-app或者 umi这样的脚手架初始化的项目，会将webpack的配置黑盒化了，如何在不执行 eject 操作的前提下优雅地配置多个项目环境呢？（最好不要一遇到问题就一键执行 eject 操作， eject 操作是不可逆的，执行之后会把所有细节都暴露在我们面前，让项目目录变得很庞大）

create-react-app 支持多环境，接下来我们一起看下如何设置。

1、react自带的两个环境变量：

1.1）NODE_ENV

create-react-app 创建的项目有内置的[环境变量]NODE_ENV，该变量是自动赋值的，不可更改。在js代码中可通过 process.env.NODE_ENV 读取它。NODE_ENV 默认有三个可能的值，分别是：

  • development：开发环境，运行 npm start, NODE_ENV 的值为 development;
  • test：测试环境，运行npm run test 则是 test;
  • production：生产环境，运行npm run build 则对应 prodution.

比如开发环境的 API 的 URL 为 urlDev，生产环境的 URL 为 urlProd，就可通过环境变量，判断当前环境，使用相应的 URL：

 
let baseUrl = ''
 
if (env === 'development') {
  baseUrl = urlDev
} else if (env === 'production') {
  baseUrl = urlProd
}
 
get(baseUrl) // 伪代码，表示请求动作

简单的系统，我们通过上面代码已经能够完成不同环境的设置了。

1.2）PUBLIC_URL：

这个变量可以用于引用模块系统之外的资源路径前缀，用create-react-app脚手架创建的react项目，在public目录下，有index.html、favicon.ico等文件，index.html中使用了该变量引用图片：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />

默认改变量的值是空（“”），上面index.html中，href=“/favicon.ico”表示站点根路径，可以设置该变量为cdn，加速静态资源访问效率。

1）如何使用改变量：

  • html中通过%PUBLIC_URL% 获取变量值
  • js中通过process.env.PUBLIC_URL 获取变量值

2）设置该变量：

在.env文件中设置该变量的值为一个合法的url路径，打包后，在使用该变量的文件中就会被替换成对应的值。（.env文件相关内容见下文）

avatar
文章
阅读
粉丝