process.env
process.env
先别急,先看 vue 项目中的用法,我们打印一下它
app.vue
一篇文章带你了解清楚 vue 中的 env 是什么
{{ demo }}
.env
NODE_ENV=development
VUE_APP_BASE_DOMAIN=http://lazytomato.com
VUE_APP_PUBLIC_PATH=/app/
展示效果
process
是什么?nodejs
下的一个全局变量。process
进程的意思,它存储着 nodejs
中进程有关的信息。 process.env
又是什么?env
是 environment
(自然环境 生态环境)的简称process.env
属性返回一个包含用户环境的对象。https://nodejs.org/dist/latest-v18.x/docs/api/process.html#processenv
在当前文件定义,当前文件使用
// main.js
process.env.name = 'tomato'
console.log(process.env.name) // "tomato"
process.env.test = null
console.log(typeof process.env.test) // "null"
# cmd
node main.js
借助①cross-env
, 在 package.json
的 属性script
中定义
在window平台下直接设置
NODE_ENV =XXX
是会报错的,cross-env
能够提供一个设置环境变量的scripts
,这样我们就能够以unix方式设置环境变量,然后在windows上也能够兼容。
# cmd
npm i -D cross-env
// package.json
"scripts": {
"study": "cross-env NODE_ENV=development node main.js "
},
// main.js
console.log(process.env) // development
# cmd
npm run study
方法三:
当需要配置的环境变量比较多的情况,所有配置全部放在 package.json
并不友好,借助插件 ②dotenv
来实现加载外部文件。
# cmd
npm i -D dotenv
# 新建一个名称为 .env 文件
a=1
b=10
c=100
d=1000
// main.js
require('dotenv').config()
console.log(process.env.a)
console.log(process.env.b)
console.log(process.env.c)
console.log(process.env.d)
# cmd
node main.js
# 输出
1
10
100
1000
分配一个属性给process.env
,当该属性的值不是字符串、数字或布尔值时,会隐式转换为字符串,Node.js 的未来版本可能会引发错误, 所以就不建议存放除 字符串 以外的数据。
process.env.a = 1
console.log(typeof process.env.a, process.env.a) // string 1
process.env.b = false
console.log(typeof process.env.b, process.env.b) // string false
process.env.c = function () {
console.log('我是函数')
}
console.log(typeof process.env.c, process.env.c) // string function () { console.log('我是函数') }
process.env.d = [1, 2, 3]
console.log(typeof process.env.d, process.env.d) // string 1,2,3
process.env.e = { name: '我是对象' }
console.log(typeof process.env.e, process.env.e) // string [object Object]
可使用delete
从 中删除属性process.env
。
process.env.a = 1
console.log(process.env.a) // 1
delete process.env.a
console.log(process.env.a) // undefined
在 Windows 操作系统上,环境变量不区分大小写。
env.TEST = 1;
console.log(env.test);
// => 1
借助 dotenv
引入 .env
,在 webpack
配置文件直接使用即可;
但是引入的环境变量只能在 webpack
中使用,通过 webpack
打包的代码无法获取环境变量。(例如 main.js无法获取环境变量)
可以借助 webpack.DefinePlugin
const webpack = require('webpack')
module.exports ={
plugins: [
new webpack.DefinePlugin({
'process.env.lazyTomato': '"hello 你好"',
}),
],
}
# 安装依赖
npm i webpack@5 webpack-cli@4 dotenv
# "devDependencies": {
# "dotenv": "^16.0.1",
# "webpack": "^5.74.0",
# "webpack-cli": "^4.10.0"
# }
// main.js
console.log(process.env.NODE_ENV)
console.log(process.env.a)
console.log(process.env.b)
// webpack.config.js
const path = require('path')
const webpack = require('webpack')
const dotenv = require('dotenv')
env = dotenv.config().parsed
const envKeys = Object.keys(env).reduce((prev, next) => {
prev[`process.env.${next}`] = JSON.stringify(env[next])
return prev
}, {})
module.exports = {
// 1. 入口文件
entry: './main.js',
// 2. 打包文件所在目录
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'bundle.js',
clean: true,
},
// 3.指定打包时要是用的模块
module: {
rules: [],
},
// 4.插件
plugins: [new webpack.DefinePlugin(envKeys)],
// 5. 模式
mode: 'production',
}
# .env
a=1
b=10
c=100
d=1000
# cmd
npx webpack
输出
// 'bundle.js
console.log("production"),console.log("1"),console.log("10"),console.log("100"),console.log("1000");
总结
dotenv
读取环境文件new webpack.DefinePlugin()
共享环境变量process.env.NODE_ENV
若未配置,它的值取决于 mode 属性。配置了及以配置为准vue-cli文档-模式
vue 打包基于 vue-cli-service;
vue-cli-service 本质还是利用 webpack 打包的;
所以整个环境变量实现原理是相似的;
一.模式默认有三种:
development
模式用于 vue-cli-service serve
test
模式用于 vue-cli-service test:unit
production
模式用于 vue-cli-service build
和 vue-cli-service test:e2e
二.可以通过 --mode
指定模式
三.不同的环境变量的配置文件
.env # 在所有的环境中被载入
.env.local # 在所有的环境中被载入,但会被 git 忽略
.env.[mode] # 只在指定的模式中被载入
.env.[mode].local # 只在指定的模式中被载入,但会被 git 忽略
四.在 vue-cli-service
只有 NODE_ENV
,BASE_URL
和以 VUE_APP_
开头的变量将通过 webpack.DefinePlugin
静态地嵌入到客户端侧的代码中。这是为了避免意外公开机器上可能具有相同名称的私钥。
五.为一个特定模式准备的环境文件 (例如 .env.production
) 将会比一般的环境文件 (例如 .env
) 拥有更高的优先级。
六..env
环境文件是通过运行 vue-cli-service
命令载入的,因此环境文件发生变化,你需要重启服务。
七.不要在你的应用程序中存储任何机密信息(例如私有 API 密钥)!环境变量会随着构建打包嵌入到输出代码,意味着任何人都有机会能够看到它。
比如,我们有三套线上环境,分别为 开发; 测试 ;正式;
三套环境的某些地方不一样。例如 baseurl
,标题。
可以这么操作
创建三个 env
配置文件 .env.dev
# .env.dev
# 打包线上代码 所以模式为 生产模式 启用webpakc打包优化。
NODE_ENV=production
VUE_APP_PUBLIC_NAME=开发
# .env.uat
# 打包线上代码 所以模式为 生产模式 启用webpakc打包优化。
NODE_ENV=production
VUE_APP_PUBLIC_NAME=测试
# .env.pre
# 打包线上代码 所以模式为 生产模式 启用webpakc打包优化。
NODE_ENV=production
VUE_APP_PUBLIC_NAME=生产
// package.json
"scripts": {
"serve": "vue-cli-service serve --mode swqswqswq",
"build-dev": "vue-cli-service build --mode dev",
"build-uat": "vue-cli-service build --mode uat",
"build-pre": "vue-cli-service build --mode pre"
},
cross-env
:Run scripts that set and use environment variables across platforms
用于跨平台运行设置和使用环境变量的脚本
dotenv
:Dotenv is a zero-dependency module that loads environment variables from a .env file into process.env. Storing configuration in the environment separate from code is based on The Twelve-Factor App methodology.
Dotenv是一个零依赖模块,它将.env文件中的环境变量加载到process.env中。将配置与代码分开存储在环境中是基于十二因素应用程序方法的。
github 地址
浅读一下dotenv的主干逻辑的源码
env
有了一个认知。