打通任督二脉的前端环境变量 — env__Vue.js__React.js
发布于 3 年前 作者 banyungong 1228 次浏览 来自 分享
粉丝福利 : 关注VUE中文社区公众号,回复视频领取粉丝福利

theme: awesome-green

新蜂商城开源仓库(内涵 Vue 2.x 和 Vue 3.x 的 H5 商城开源代码,带服务端 API 接口):https://github.com/newbee-ltd

Vue 3.x + Vant 3.x + Vue-Router 4.x 高仿微信记账本开源地址(带服务端 API 接口):https://github.com/Nick930826/daily-cost

前言

环境变量 (environment variables)这个概念,在前端工程化盛行之时,便悄悄的进入了前端的视野。前端远古时代没有工程化的概念,开发环境、测试环境、生成环境全靠大家手动配置。而现如今 webpack 、 snowpack 、 rollup 等打包工具大行其道,我们不得不将它重视起来。在现代前端开发的一整个链路中, 环境变量 起到一个项目的配置枢纽作用,个人拙见,不喜轻喷。

各个脚手架工具中的环境变量

是门面上不乏各式各样的脚手架工具,如 Vue CLI 、 UmiJS 、 Vite 、 create-react-app 、 Nuxt.js 、 Next.js 等等,上述这些工具我想作为一名前端开发,多少都会接触过一两个,如果你是高级玩家,想必不用再往下看了,因为通过阅读文档,以及自己的实验,就能知道如何在这些脚手架工具下获取环境变量。但对致力于从 0 到 1 搭建一套前端项目开发环境的新手前端来说,这篇文章可以好好看看,兴许对你会有所帮助。

Vue CLI

一定要先看官方文档,不要上来就开整,很多配置内部是有约定的,所以别乱来。文档说的很清楚,三种模式 developmenttestproduction,分别代表开发、测试、生产。

image.png 可以在命令行这样设置:

"scripts": {
  "serve": "vue-cli-service serve",
  "build:beta": "vue-cli-service build --mode development",
  "build:release": "vue-cli-service build --mode production",
  "lint": "vue-cli-service lint"
}

image.png

文件名对应 mode 配置,当你运行指令 npm run build:beta 时,便可以在页面内部获取 .env.development 内设置的变量,如下所示:

image.png

<template>
  <img alt="Vue logo" src="./assets/logo.png">
</template>

<script>
export default {
  name: 'App',
  setup() {
    console.log('env', process.env)
  }
}
</script>

image.png

这里要特别注意一点,Vue CLI 在打包生产环境的时候,一定要使用 production 模式,因为内部 webpack 构建代码的时候,会根据 NODE_ENV 来选择不同的构建脚本,生产环境肯定会做很多优化,所以切记。

有了环境变量之后,在项目内一些测试环境、生产环境需要的资源,便可以动态配置。

Vite

Vite 2.0 是今年刚出来的新脚手架,香气四溢。我发现上一篇文章《Vite 2.0 + React + Ant Design 4.0 搭建开发环境》中,获取环境变量有更好的方式,这是我从官方文档中发现的。

首先 package.json 做如下修改:

"scripts": {
  "dev": "vite --mode development",
  "build:beta": "vite build --mode beta",
  "build:production": "vite build --mode production",
  "serve": "vite preview"
},

vite.config.js 中,可以通过如下形式拿到 mode

export default ({ mode }) => defineConfig({
	...
})

在页面中,我们通过在根目录设置 .env.document 、 .env.beta 、 .env.production 来设置相应环境的变量,上述三个脚本内的文件最好是如下形式:

VITE_BASE_URL=http://www.development.baidu.com
VITE_BUILD_ENV=beta

在页面内部通过 import.meta.env 获取,打印结果如下所示:

image.png

UmiJS

同样先看看官方文档的描述,如下所示:

image.png

关键词 UMI_ENV ,这里我举例 config 的配置形式,创建一个基础 umi 项目,配置如下所示:

image.png

config.beta.js 的代码如下:

export default {
  define: {
    'process.env.BUILD_ENV': 'beta'
  }
}

config.release.js 的代码如下:

export default {
  define: {
    'process.env.BUILD_ENV': 'release'
  }
}

运行项目的过程中,你可以在内部脚本中,通过 process.env.BUILD_ENV 获取相应的环境变量。这里的环境变量名,可以自定义。

Nuxt.js

它配置环境变量就比较简单了,修改 package.json 如下所示:

"scripts": {
  "dev": "NODE_ENV=development nuxt",
  "build:beta": "NODE_ENV=beta nuxt build",
  "build:production": "NODE_ENV=production nuxt build",
  "start": "nuxt start",
  "generate": "nuxt generate"
}

设置好后,在项目中通过 process.env.NODE_ENV 获取,运行 yarn dev 打印结果如下所示:

image.png

当然, nuxt.config.js 内部也可以通过 env 配置,这里不做赘述。

create-react-app

官方文档说它只有两个环境,一个是开发环境 development,另一个便是生产环境 production。那怎么添加测试环境呢,内部页面没法判断生产环境是正式还是测试。经过我一番搜索,找到一个工具库 — dotenv-cli。将其安装到 devDependencies :

yarn add dotenv-cli -D

然后我们修改 package.json 如下:

"scripts": {
  "start": "react-scripts start",
  "build:beta": "dotenv -e .env.beta react-scripts build",
  "build:production": "react-scripts build",
  "test": "react-scripts test",
  "eject": "react-scripts eject"
}

煮鱼, .env.beta 对应的根目录的 .env.beta,而 build:production 的指令,默认对应的是 .env.production,如下所示:

image.png

运行打包后,你可以在内部页面通过 process.env.REACT_APP_TITLE 拿到环境变量,具体的值可以自己配置,但是请以 REACT_APP_ 开头,否则内部无法识别。否则打包的时候,默认就会获取 .env.production 上的变量。

我尝试打完测试包后运行项目,打印 process.env 如下所示:

image.png

Next.js

不跟你多 BB,直接上 package.json :

"scripts": {
  "dev": "BUILD_ENV=development next dev",
  "build:beta": "BUILD_ENV=beta next build",
  "build:production": "BUILD_ENV=production next build",
  "start": "next start"
}

同样, Next.js 只有开发环境和生产环境,没有区分正式和测试,这边就通过 BUILD_ENV 的环境变量来区分 beta 和 production。接下来要配置一下 next.config.js :

module.exports = {
  env: {
    BUILD_ENV: process.env.BUILD_ENV
  }
}

通过这样的配置之后,在页面中便可以通过 process.env.BUILD_ENV 获取到环境变量,启动开发环境,打印结果如下:

image.png

总结

现如今的前端工程化已经深入人心,如果你想获得一些前端岗位上的竞争优势,你必须要尝试着,自己去从 0 到 1 架构出一个项目,包括后续的上线、优化、迭代。一直有前辈在前面庇护,你永远都不会有实质性的成长,日积月累你就会开始进入一个“温水煮青蛙”的状态,先从环境变量的管理开始吧,加油。

版权声明:著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。 作者: 尼克陈 原文链接:https://juejin.im/post/6943769360758472735

回到顶部