[JavaScript知识库]vue项目中的 env文件从何而来？什么是 process.env

start

• 在 vue 项目中，时常会遇到到这么一行代码 process.env
• 这东西是什么，怎么用？
• 今天一篇文章带你了解 process.env

1.使用场景

先别急，先看 vue 项目中的用法，我们打印一下它

app.vue

<template>
  <div>
    <h1>一篇文章带你了解清楚 vue 中的 env 是什么</h1>
    {{ demo }}
  </div>
</template>

<script>
export default {
  computed: {
    demo() {
      return process.env.NODE_ENV
    },
  },
  mounted() {
    console.log(process.env)
  },
}
</script>

.env

NODE_ENV=development
VUE_APP_BASE_DOMAIN=http://lazytomato.com
VUE_APP_PUBLIC_PATH=/app/

展示效果

2.process是什么？

• 简单来说、是 nodejs 下的一个全局变量。
• 单词 process 进程的意思，它存储着 nodejs 中进程有关的信息。

3. process.env 又是什么？

• env 是 environment (自然环境 生态环境)的简称
• 该process.env属性返回一个包含用户环境的对象。

官方地址：

https://nodejs.org/dist/latest-v18.x/docs/api/process.html#processenv

4.怎么用：

方法一：

在当前文件定义，当前文件使用

// 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

其他注意事项:

1. 分配一个属性给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]
   

2. 可使用delete从 中删除属性process.env。

   process.env.a = 1
   console.log(process.env.a) // 1
   
   delete process.env.a
   console.log(process.env.a) // undefined
   

3. 在 Windows 操作系统上，环境变量不区分大小写。

   env.TEST = 1;
   console.log(env.test);
   // => 1
   

5. webpack中如何使用的？

借助 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");

总结

1. 借助dotenv读取环境文件
2. 借助 new webpack.DefinePlugin() 共享环境变量
3. process.env.NODE_ENV 若未配置，它的值取决于 mode 属性。配置了及以配置为准

7. vue中如何使用？

官方文档：

vue-cli文档-模式

前提

vue 打包基于 vue-cli-service；

vue-cli-service 本质还是利用 webpack 打包的；

所以整个环境变量实现原理是相似的；

简单介绍一下

一.模式默认有三种：

1. development 模式用于 vue-cli-service serve
2. test 模式用于 vue-cli-service test:unit
3. 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

用于跨平台运行设置和使用环境变量的脚本

github 地址

②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的主干逻辑的源码

end

• 写到这里，基本对这个 env 有了一个认知。
• 回到最初的使用场景，其实也就一目了然了。