vite配置.env环境变量文件,开发环境,测试环境,预发布环境,生产环境

在vue2,用的vue-cli脚手架搭建项目,cli用的是webpack

当你yarn dev时,命令会启动package.json中的dev键名的值,也就是后面的一行命令

这时浏览器会去识别你是开发环境还是生产环境,其实windows是不能直接识别你是开发环境还是生产环境的,是webpack帮助我们识别了开发环境和生产环境。在vue2中我们可以直接用process.env就能拿到环境变量。这是webpack的功劳。

在vue3中,用的是vite,不是webpack,当你yarn dev时启动开发环境,window是无法识别你是开发环境还是生产环境的,这时vite用内部的dotenv这个第3方库,来帮助识别是开发环境还是生产环境,当你yarn dev市,dotenv会判断你启动的是开发环境还是生产环境,如果是开发环境,就去项目的根目录中找.env.development环境变量文件,将这个文件中创建的变量也就是所有以VITE_开头的环境变量添加到import.meta.env中

import.meta.env是window浏览器提供的。

import.meta.env中不仅有你自己创建的VITE_开头的环境变量,还有一开始就系统就创建好的环境变量。

注意:

NODE_MODE是node.js提供的系统变量

webpack4之前,都是在package.json的scripts中手动指定环境变量

webpack4之后,都是在webpack.config.js中新增加了mode选项,通过这个mode选项来指定环境变量

总结:

vite通过dotenv识别开发环境和生产环境,在识别环境后,在根文件中找到对应的.env环境变量文件,将文件中的以VITE_开头的变量全部添加到import.meta.env对象中。

相关推荐
pcm1235671 分钟前
内置线程池的核心参数分析配置
java·开发语言
一枚前端小能手11 分钟前
🔥 重学Vue之computed、watch、watchEffect原理与用途详解
前端·javascript·vue.js
啊森要自信13 分钟前
【MySQL 数据库】MySQL用户管理
android·c语言·开发语言·数据库·mysql
代码不停16 分钟前
JavaEE初级 多线程案例(单例模式、阻塞队列、线程池、定时器)
java·开发语言·单例模式·java-ee
Amos_Web23 分钟前
Rust实战课程--网络资源监控器(初版)
前端·后端·rust
神秘的猪头25 分钟前
html5与js今日笔记
前端
Zyx200726 分钟前
JavaScript 中的对象字面量与代理模式:用代码演绎“爱情故事”
javascript
程序猿小蒜26 分钟前
基于springboot的基于智能推荐的卫生健康系统开发与设计
java·javascript·spring boot·后端·spring
渣哥26 分钟前
IOC 容器的进化:ApplicationContext 在 Spring 中的核心地位
javascript·后端·面试
Zyx200727 分钟前
🎹用 HTML5 打造“敲击乐”钢琴:前端三剑客的第一次交响曲
前端