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对象中。

相关推荐
遂心_29 分钟前
为什么 '1'.toString() 可以调用?深入理解 JavaScript 包装对象机制
前端·javascript
IT_陈寒30 分钟前
JavaScript 性能优化:5 个被低估的 V8 引擎技巧让你的代码快 200%
前端·人工智能·后端
王同学QaQ1 小时前
Vue3对接UE,通过MQTT完成通讯
javascript·vue.js
岛风风1 小时前
关于手机的设备信息
前端
ReturnTrue8681 小时前
nginx性能优化之Gzip
前端
程序员鱼皮2 小时前
刚刚 Java 25 炸裂发布!让 Java 再次伟大
java·javascript·计算机·程序员·编程·开发·代码
w_y_fan2 小时前
Flutter 滚动组件总结
前端·flutter
wuli金居哇2 小时前
我用 Turborepo 搭了个 Monorepo 脚手架,开发体验直接起飞!
前端
Asort2 小时前
JavaScript 从零开始(五):运算符和表达式——从零开始掌握算术、比较与逻辑运算
前端·javascript
一枚前端小能手2 小时前
🚀 缓存用错了网站更慢?前端缓存策略的5个致命误区
前端·javascript