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
一定要先看官方文档,不要上来就开整,很多配置内部是有约定的,所以别乱来。文档说的很清楚,三种模式 development
、 test
、 production
,分别代表开发、测试、生产。
可以在命令行这样设置:
"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"
}
文件名对应 mode
配置,当你运行指令 npm run build:beta
时,便可以在页面内部获取 .env.development
内设置的变量,如下所示:
<template>
<img alt="Vue logo" src="./assets/logo.png">
</template>
<script>
export default {
name: 'App',
setup() {
console.log('env', process.env)
}
}
</script>
这里要特别注意一点,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
获取,打印结果如下所示:
UmiJS
同样先看看官方文档的描述,如下所示:
关键词 UMI_ENV
,这里我举例 config
的配置形式,创建一个基础 umi
项目,配置如下所示:
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
打印结果如下所示:
当然, 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
,如下所示:
运行打包后,你可以在内部页面通过 process.env.REACT_APP_TITLE
拿到环境变量,具体的值可以自己配置,但是请以 REACT_APP_
开头,否则内部无法识别。否则打包的时候,默认就会获取 .env.production
上的变量。
我尝试打完测试包后运行项目,打印 process.env
如下所示:
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
获取到环境变量,启动开发环境,打印结果如下:
总结
现如今的前端工程化已经深入人心,如果你想获得一些前端岗位上的竞争优势,你必须要尝试着,自己去从 0 到 1 架构出一个项目,包括后续的上线、优化、迭代。一直有前辈在前面庇护,你永远都不会有实质性的成长,日积月累你就会开始进入一个“温水煮青蛙”的状态,先从环境变量的管理开始吧,加油。
版权声明:著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。 作者: 尼克陈 原文链接:https://juejin.im/post/6943769360758472735