vite环境变量配置小结

更新时间：2023年11月22日 11:56:26 作者：可缺不可滥

Vite环境变量配置是Vite开发环境下重要的一环,它能够根据不同的环境变量对项目进行不同的配置,使得项目更加灵活和可维护,本文就来介绍一下vite环境变量配置小结,感兴趣的可以了解一下

将开发环境和生产环境区分开

分别创建三个vite 的配置文件，并将它们引入vite.config.js

vite.base.config.js

import { defineConfig } from "vite"

export default defineConfig ({})

vite.dev.config.js

import { defineConfig } from "vite"

export default defineConfig ({})

vite.prd.config.js

import { defineConfig } from "vite"

export default defineConfig ({})

引入vite.config.js

import { defineConfig } from "vite";
import viteBaseConfig from "./vite.base.config";
import viteDevConfig from "./vite.dev.config";
import vitePrdConfig from "./vite.prd.config";

const EnvMap = {
  build: () => {
    return Object.assign({}, viteBaseConfig, vitePrdConfig);
  },
  serve: () => {
    return Object.assign({}, viteBaseConfig, viteDevConfig);
  },
};

export default defineConfig(({ command }) => {
  console.log("command:", command);
  return EnvMap[command]();
});

在package.json中配置vite的开发命令和打包命令

{
  "name": "vite",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",
  "scripts": {
    "dev": "vite",
    "build": "vite build"
  },
  "dependencies": {
    "lodash": "^4.17.21",
  },
  "devDependencies": {
    "vite": "^5.0.0"
  }
}

分别执行一下以下两行命令

yarn dev

yarn build

可以看到，确实能够根据command这个变量，来区分开发还是生产。

在这里插入图片描述

环境变量

会根据当前当前代码所在环境而发生变化的变量。

代码环境通常包括
开发环境、测试环境、预发布环境、灰度环境、生产环境

比如百度地图的sdk，某些第三方请求特定的密钥或者token，以及小程序的APP_KEY,不同环境请求的后端接口地址也有可能不同。

以上这些举例的变量，都会因为开发周期的变化，用不同的变量值，这个时候，如果这些变量能够根据环境的变化自动变化，就比较完美，减少人工干预，才可能不出错。

vite处理环境变量

vite内置第三方库dotenv来处理环境变量的获取和注入。

dotenv会自动读取.env文件，并解析这个文件的环境变量，并将其挂到process对象（nodejs的process）上。

创建.env文件，vite默认在.env创建全局环境变量，

NAME = "dengxi"
POSITION = "CEO"

更改vite.config.js配置，这里引入了vite自带的方法loadEnv

import { defineConfig, loadEnv } from "vite";
import viteBaseConfig from "./vite.base.config";
import viteDevConfig from "./vite.dev.config";
import vitePrdConfig from "./vite.prd.config";

const EnvMap = {
  build: () => {
    return Object.assign({}, viteBaseConfig, vitePrdConfig);
  },
  serve: () => {
    return Object.assign({}, viteBaseConfig, viteDevConfig);
  },
};

export default defineConfig(({ command, mode }) => {
  console.log("command:", command);  
  console.log("mode:", mode) 
  const env = loadEnv(mode, process.cwd(),"");
  console.log("env:", env.NAME) 
  return EnvMap[command]();
});

无论是通过vite创建服务器，还是通过vite打包，我们都能获取到。

yarn dev

yarn build

左侧是vite启动开发服务器，右侧是vite打包到生茶环境，它们都能获取到.env配置的环境变量

在这里插入图片描述

loadEnv

这个方法非常重要，通过它我们可以自由配置环境变量的存储文件，vite虽然提供了默认的.env，但这显然是不够用的，实际项目中，可能会有很多环境，需要将不同的环境变量放到不同的文件中。

loadEnv接收三个参数，第一个参数来自我们的启动命令，如果是vite自带的启动服务命令yarn vite 本文中配置的是yarn dev, mode === 'development' // true ,如果vite自带的打包命令 yarn vite build，本文中配置的是yarn build， mode === 'production' // true

左边是启动服务器，右边是打包

在这里插入图片描述

如果你想自由配置这个mode的值怎么办呢？

yarn vite --mode 'test'

在这里插入图片描述

这样就可以通过不同的命令，来控制mode变量了。

loadEnv的第二个参数，其实是用来存放环境变量文件所在的路径，一般这种配置文件，都是放到项目根目录下的，通过process.cwd()方法，可以获取当前node进程所在的位置，也就是vite.config.js文件所在的位置，而vite.config.js也在项目根目录下，所以可以这么直接用。但本质上第二个参数就是一个路径，理论上，通过配置这第二个参数，我们能够将存储变量的文件放到任意路径下。

loadEnv的第三个参数，是用来配置存储环境变量文件的文件名前缀，默认是.env，通过配置它，我们就能有多个不同环境的配置环境变量的文件了。

如果第三个参数传入 ENV，那默认的存储全局环境变量的文件就得改名为ENV生产环境存储环境变量的文件，就得改名为ENV.production开发环境存储环境变量的文件，就得改名为 ENV.development

创建 .env.development 文件，文件名称由上文提到的loadEnv方法的第三个参数和上文提到的 mode 组合而成，默认开发环境loadEnv方法的第三个参数是.env，默认开发环境mode是development

NAME = "yangxi"
AGE = 20

创建 .env.production 文件，文件名称由上文提到的loadEnv方法的第三个参数和上文提到的 mode 组合而成，默认生产环境loadEnv方法的第三个参数是.env，默认生产环境mode是production

NAME = "yangxianddengxi"
AGE = 38

再自定义一个test环境
创建 .env.test 文件

NAME = "firstname lastname"
AGE = "number"

此时的vite.config.js

import { defineConfig, loadEnv } from "vite";
import viteBaseConfig from "./vite.base.config.js";
import viteDevConfig from "./vite.dev.config.js";
import vitePrdConfig from "./vite.prd.config.js";

const EnvMap = {
  build: () => {
    return Object.assign({}, viteBaseConfig, vitePrdConfig);
  },
  serve: () => {
    return Object.assign({}, viteBaseConfig, viteDevConfig);
  },
};

export default defineConfig(({ command, mode }) => {
  const env = loadEnv(mode, process.cwd(),"");
  console.log("env", env.NAME); // 获取当前的环境变量
  return EnvMap[command]();
});

分别执行以下命令

yarn dev // 或者yarn vite

yarn build // 或者yarn vite build

yarn dev --mode 'test' // 或者 yarn vite --mode 'test'

左边是development ，中间是production，右边是test

在这里插入图片描述

env.POSITION 只有.env文件配置了，所以三个环境都能拿到，没有被覆盖。
env.NAME 每个环境都配置了，.env配置的变量被覆盖了，三个环境拿到的值都不一样。

业务代码需要使用环境变量

上面介绍了在vite中如何配置和使用环境变量，实际开发中，我们在业务中，也常常要使用环境变量。

环境变量，会被vite注入到import.meta.env这个变量中

我们重新配置一下 .env 、.env.development、.env.test

.env

# 上面是服务器所需的环境变量
NAME = "dengxi"
POSITION = "CEO"

# 下面是业务中所需的环境变量，业务中的环境变量默认必须带有前缀VITE_,这样的变量才会被vite注入到import.meta.env
VITE_CAN = "全栈开发"
VITE_DO = "全栈开发"

.env.development

# 上面是服务器所需的环境变量
NAME = "yangxi"
AGE = 20

# 下面是业务中所需的环境变量，业务中的环境变量默认必须带有前缀VITE_,这样的变量才会被vite注入到import.meta.env
VITE_CAN = "前端开发"

.env.test

# 上面是服务器所需的环境变量
NAME = "firstname lastname"
AGE = "number"

# 下面是业务中所需的环境变量，业务中的环境变量默认必须带有前缀VITE_,这样的变量才会被vite注入到import.meta.env
VITE_CAN = "啥也不会"

我们在main.js中尝试打印 import.meta.env

import { count } from "./counter.js";

console.log(import.meta.env)

console.log(count);

分别启动development环境的服务器和test环境的服务器

yarn build // 或者yarn vite build

yarn dev --mode 'test' // 或者 yarn vite --mode 'test'

在这里插入图片描述

分别打开浏览器查看

development环境

在这里插入图片描述

test环境

在这里插入图片描述

环境变量中，只有VITE_前缀的环境变量才被成功注入到import.meta.env中，供业务端使用
.env的全局配置变量VITE_DO也被注入了，但如果对应的环境变量中，有同名的变量，它VITE_CAN将会被覆盖

修改VITE_前缀

默认强制加一个VITE_才能注入到业务中，也挺恶心的，但必须得有一个前缀，不然如何区分注入服务器的环境变量和业务中使用的环境变量呢

通过配置envPrefix来改变使用的前缀,一般来说不同环境使用的环境变量名称都是相同，不然你就得在不同的环境配置不同名称的环境变量，而且在使用的时候也要用不同的名字，太麻烦了。所以这个envPrefix配置在vite.base.config.js即可。

vite.base.config.js

import { defineConfig } from "vite";

export default defineConfig({
  optimizeDeps: {
    exclude: [], // 将指定数组中的依赖不进行预构建
  },
  envPrefix: "ENV", // 更改环境变量注入到业务代码中，所需的前缀名
});

修改完对应的环境变量名称后，一样能拿到环境变量

在这里插入图片描述

到此这篇关于vite环境变量配置小结的文章就介绍到这了,更多相关vite环境变量配置内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

Vue设置长时间未操作登录自动到期返回登录页
这篇文章主要介绍了Vue设置长时间未操作登录以后自动到期返回登录页,本文通过实例代码给大家介绍的非常详细，需要的朋友可以参考下
2020-01-01
vue-router next(false) 禁止访问某个页面时,不保留历史访问记录问题
这篇文章主要介绍了vue-router next(false) 禁止访问某个页面时,不保留历史访问记录问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2023-11-11
vue使用el-select下拉框匹配不到值的问题及解决
这篇文章主要介绍了vue使用el-select下拉框匹配不到值的问题及解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2023-05-05
详解Vue中的基本语法和常用指令
Vue.js 是一套构建用户界面的框架，**只关注视图层**，它不仅易于上手，还便于与第三方库或既有项目整合。这篇文章主要介绍了vue 的基本语法和常用指令,需要的朋友可以参考下
2019-07-07
Vue3使用element-plus实现弹窗效果
本文主要介绍了Vue3使用element-plus实现弹窗效果，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2023-07-07
vue项目下载文件重命名监测进度demo
这篇文章主要为大家介绍了vue项目下载文件重命名监测进度demo,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
2023-10-10
Vue2.0 slot分发内容与props验证的方法
本篇文章主要介绍了Vue2.0 slot分发内容与props验证的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-12-12
vue2.0多条件搜索组件使用详解
这篇文章主要为大家详细介绍了vue2.0多条件搜索组件的实现方法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-05-05
vant(ZanUi)结合async-validator实现表单验证的方法
这篇文章主要介绍了vant(ZanUi)结合async-validator实现表单验证的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-12-12
在Vue中定义和调用过滤器的方法
过滤器(Filters)是 vue 为开发者提供的功能，常用于文本的格式化，这篇文章主要介绍了如何在Vue中定义和调用过滤器,需要的朋友可以参考下
2023-09-09