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

相关推荐
CodeCraft Studio1 小时前
PDF处理控件Aspose.PDF教程:使用 Python 将 PDF 转换为 Base64
开发语言·python·pdf·base64·aspose·aspose.pdf
零点零一1 小时前
VS+QT的编程开发工作:关于QT VS tools的使用 qt的官方帮助
开发语言·qt
2501_915918412 小时前
Web 前端可视化开发工具对比 低代码平台、可视化搭建工具、前端可视化编辑器与在线可视化开发环境的实战分析
前端·低代码·ios·小程序·uni-app·编辑器·iphone
程序员的世界你不懂3 小时前
【Flask】测试平台开发,新增说明书编写和展示功能 第二十三篇
java·前端·数据库
索迪迈科技3 小时前
网络请求库——Axios库深度解析
前端·网络·vue.js·北京百思可瑞教育·百思可瑞教育
gnip3 小时前
JavaScript二叉树相关概念
前端
lingchen19063 小时前
MATLAB的数值计算(三)曲线拟合与插值
开发语言·matlab
gb42152874 小时前
java中将租户ID包装为JSQLParser的StringValue表达式对象,JSQLParser指的是?
java·开发语言·python
一朵梨花压海棠go4 小时前
html+js实现表格本地筛选
开发语言·javascript·html·ecmascript
蒋星熠4 小时前
Flutter跨平台工程实践与原理透视:从渲染引擎到高质产物
开发语言·python·算法·flutter·设计模式·性能优化·硬件工程