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