vue工具之环境变量.env的配置

一、什么是环境变量？

1. 什么是环境变量？

所谓环境变量，顾名思义就是给环境有关的变量，在不同的环境下有着不同的值。通过配置环境变量，我们可以根据不同的环境(开发环境、测试环境、生产环境等) 来加载不同的配置。

开发环境：开发环境是开发人员进行代码编写和调试的环境。(例如：我们编码使用的电脑)
测试环境：测试环境是为了对应用进行各种测试 (如功能测试、性能测试等) 而搭建的环境。
生产环境：生产环境是用户实际使用应用的环境。(例如：我们完成编码后，最终项目是运行在我们的服务器上)

2.多环境场景的业务形态

我们先来了解，在多环境下要求前端工程架构流程是怎样的？

如上图所示，在工程启动 / 构建时：

环境变量注入：一般通过命令参数模式，可在package.json里配置；
多模式文件：vite根据环境变量来读取配置文件，把文件参数抽取出来做特性区分，这块也称为Vite的环境模式；
环境收集器：简单理解为1个函数(loadEnv)，做的事情就是把第二步的特性参数归整到一处并做些特定的逻辑，之后通过插件生成客户端的最终参数并吐出；
客户端环境差异定制化：客户端（也就是工程里面的.vue、.ts、.tsx等前端文件）获取到环境参数做一些特定区分逻辑；
构建和发布：之后就是项目根据以上几步产出的环境特性文件来打包，最终推送到服务端完成整个前端工程的生产。

二、多模式文件配置及使用

vite中多模式文件配置

Vite内置了dotenv这个第三方库， dotenv会自动读取.env文件， dotenv 从你的环境目录中的下列文件中加载额外的环境变量：

.env                # 所有情况下都会加载
.env.local          # 所有情况下都会加载，但会被 git 忽略
.env.[mode]         # 只在指定模式下加载
.env.[mode].local   # 只在指定模式下加载，但会被 git 忽略

☘️ 默认情况下.env文件

.env 全局默认配置文件，不论什么环境都会加载合并(优先加载此文件，再加载下面两个文件，同名变量会覆盖此文件变量)

.env.development 开发环境下的配置文件, 仅在开发环境加载。

.env.production 生产环境下的配置文件（也就是正式环境），仅在生产环境加载。

以上三个文件命名不能改变，当我们执行以下命令时，会自动加载

npm run dev   会加载 .env 和 .env.development 内的配置
npm run build 会加载 .env 和 .env.production  内的配置

☘️ 自定义情况下的.env文件

除了默认情况下的.env文件，我们还可以自定义一些其它环境文件，如 .env.test、.env.beta、.env.release、.env.beat.local等。这些文件在没有对package.json增加对应的启动命令下是不能像“.env”, “.env.development” 和 “ .env.production”一样，被自动加载的。

使用 --mode pro 进行设置

"scripts": {
    "serve": "vite",    //未指定默认取.env中的配置
    "dev": "vite --mode dev",   // 取 .env.dev文件中的配置
    "pro": "vite --mode pro",   // 取 .env.pro文件中的配置
    "build": "vue-tsc --noEmit && vite build",    //未指定默认取.env中的配置
    "build:dev": "vue-tsc --noEmit && vite build --mode dev",    // build的时候取dev的配置
    "build:pro": "vue-tsc --noEmit && vite build --mode pro",     // build的时候取pro的配置
    "preview": "vite preview"
},

最后, 想要在提交代码时忽略本地.env文件，还要在.gitignore文件中添加.local （意思就是说以.local为结尾的环境文件，在用git管理时，不会被提交到远程仓库）

node_modules
dist
dist-ssr
*.local

vite中自定义环境变量

☘️ .env #全局默认, 不论什么环境都会加载

NODE_ENV = "env"
VITE_NODE_ENV = "env"  //VITE开头的给vue3+vite使用

☘️ .env.development（# 开发环境）

# 开发环境
 
# 指定构建模式
VITE_NODE_ENV=development
 
# 页面 title 前缀
VUE_APP_TITLE=开发环境
 
# 网络请求公用地址
VITE_API_BASE_URL='https://huy.com/dev'

☘️ .env.production（# 生产环境）

# 构建预览页面
 
# 指定构建模式 production
VITE_NODE_ENV=production
 
# 页面 title 前缀
VUE_APP_TITLE=生产环境
 
# 网络请求公用地址
VITE_API_BASE_URL='https://huy.com/sit'

vite使用环境变量

☘️ vite中的业务代码（由于vite代码是运行在浏览器中，所以我在代码中我们可以通过import.meta.env使用环境变量。

vite在处理环境变量时和之前webpack并不一样，它只会将环境变量文件中VITE_为前缀的变量加载到import.meta.env对象上去，而且并不支持动态key的形式：

import.meta.env[key] //无效的

运行“npm run dev” ，加载 .env 和 .env.development 内的配置。这些加载的环境变量也会通过 import.meta.env 以字符串形式暴露给客户端源码。

console.log( import.meta.env) //查看相关信息 这里不显示非VITE开头的变量

结果:

🔊：内建变量
import.meta.env.MODE: {string} 应用运行的模式。
import.meta.env.BASE_URL: {string} 部署应用时的基本 URL。他由base 配置项决定。
import.meta.env.PROD: {boolean} 应用是否运行在生产环境。
import.meta.env.DEV: {boolean} 应用是否运行在开发环境 (永远与 import.meta.env.PROD相反)。
import.meta.env.SSR: {boolean} 应用是否运行在服务器渲染环境。
🔊：环境变量

VITE_API_BASE_URL: 'https://huy.com/dev'
VITE_NODE_ENV: "development"
VITE_USER_NODE_ENV: "env"

☘️ vite中的vite.config.ts （vite.config.js运行在node环境中，因此，可以识别process.env变量）

在vite环境中，我们没法在业务代码中直接使用process.env这个变量对象，vite并没有将其注入到全局中去，反倒是在vite.config.ts配置文件中，我们还可以访问到它，但是在配置文件中反倒无法使用import.meta.env，也无法通过process.env访问到环境变量文件中的自定义的环境变量。

如何在vite.config.js中获取到环境变量?

常见的做法如下：

import { defineConfig, loadEnv } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig(({ command, mode, ssrBuild }) => {
    //这个对象就是根据开发模式还是生产环境加载的.env.development文件里的环境变量，有系统自带的也有自己手写的。类似于在业务代码中使用 import.meda.env 效果。
      const env = loadEnv(mode, process.cwd()); 
      console.log('env', env); 
      return { plugins: [vue()], base: env.VITE_PUBLIC_PATH,} 
  }
)

process.env 虽然在vite.config.js中可以使用，但是process.env得到的是node环境下预设的环境变量，它并不会加载配置的环境变量文件中的变量，哪怕你的文件名是.env这种优先级最先的环境变量文件。获取到环境变量文件中的变量，仍然还是需要通过

loadEnv 函数的去处理。

loadEnv()

loadEnv() 函数返回一个对象，这个对象就是根据开发模式还是生产环境加载的.env.development文件里的环境变量，有系统自带的也有自己手写的。

loadEnv(开发模块，.env文件所在的文件夹，指定环境变量前缀)

_{⚠️注意：}
_{第3个参数prefiexes如果是“”空字符串，就显示所有的环境变量，系统自带+自己手写}
_{第3个参数prefiexe如果省略不写，就只显示自己在.env.development文件中创建的变量}

process.cwd()

process.cwd() 得到的是启动 Node.js 进程时所在的目录。

三、配置环境变量进阶？

更改.env的默认地址

🤔 我们现在的.env文件都是建立在根目录的，如果.env.XX的文件太多，会显得我们的项目目录很乱，我们能将.env放在一个统一的文件夹内吗？

可以通过envDir配置来改变！

envDir用于加载 .env 文件的目录。可以是一个绝对路径，也可以是相对于项目根的路径。

类型： string 
默认： root

比如，我们在vite.config.js中这样配置

import { defineConfig } from "vite";
export default defineConfig( {
  envDir:"env"
});

然后，所有的.env.xxx文件就可以放在项目根目录的env文件夹下了。

更改环境变量的VITE_前缀

🤔 如果你觉得VITE_ 前缀不够骚，想更换这个前缀，该怎么做呢？

使用envPrefix配置来改变！

以 envPrefix 开头的环境变量会通过 import.meta.env 暴露在你的客户端源码中。

类型： string | string[]
默认： VITE_

比如，我们在vite.config.js中这样配置

import { defineConfig } from "vite";
export default defineConfig( {
    envPrefix:"APP_", //APP_ 为自定义开头名
});

⚠️ envPrefix: 不应被设置为空字符串 ' ' ，这将暴露你所有的环境变量，导致敏感信息的意外泄漏。检测到配置为 ' ' 时 Vite 将会抛出错误.

define全局常量注入

在使用vue cli或者webpack搭建的项目中，使用process.env获取环境变量是一个常见的做法，但是迁移到vite就会产生问题，前面也说过了，vite不会在全局环境中注入该变量，为此我们可以手动实现注入。

import { defineConfig, loadEnv } from "vite";
export default ({mode}) => {
  process.env = { ...process.env, ...loadEnv(mode, process.cwd()) };

  return defineConfig({
    define: {
      "process.env": JSON.stringify(process.env)
    }
  });
}

❗️官方要求值必须是JSON对象，所以我们将对象JSON.stringify格式化一下即可，注意哪怕你只是一个string值，你也得JSON.stringify格式化，所以只要记住一点，凡是赋值就JSON.stringify转一下。

vite中的mode

vite和webpack一样，都有mode配置选项。

默认情况下，开发服务器 (dev 命令) 运行在 development (开发) 模式，而 build 命令则运行在 production (生产) 模式。

运行dev命令会默认加载.env.development环境变量文件；
运行build命令会默认加载.env.production环境变量文件；

假设所有的环境变量都不配置NODE_ENV，在dev命令下NODE_ENV="development"，在build构建命令下NODE_ENV="production"。

而vite的mode选项，默认采用NODE_ENV，所以需要注意，如果你指定了环境变量文件，且没有配置NODE_ENV的情况下，你可以根据你的命令来确定当前的打包模式。

posted on 2024-08-20 13:08 梁飞宇阅读(652) 评论(0) 收藏举报

刷新页面返回顶部

梁飞宇