vue3入门人话版（四）：构建工具和环境变量

首先前端的常见命令有

npm run dev : 启动编译器，默认热更新
npm run build  :启动编译器，编译vue文件，默认导出到项目目录的dist文件夹下
npm  install： 安装依赖，依赖一般配置在项目根目录下package.json中。ps： 一般在项目根目录下执行npm install xxx，会自动将依赖配置写入package.json

显然npm run dev只是我们开发前端代码时才用到的，而npm run build生成的静态文件（指html、css、js）才是被安装在web服务器静态目录中通过http协议被浏览器端访问、渲染的网页，如大多数高级编程语言一样，vue也存在编译器，vite、webpack等。

那么这和环境变量有什么关系？

如果你的环境变量是从系统中读取，那么必然没什么关系，但是目前现代的做法是编译器在构建时从配置文件中读取，例如.env。显然，不同的编译器对配置文件的名称、格式，引入的方式都不同。

构建工具 / 脚手架	在代码里的读取	变量前缀要求	自动加载的文件（示例）
Vite + Vue	import.meta.env.X	VITE_	.env、.env.development、.env.production、.env.local 等
Vue CLI (webpack)	process.env.X	VUE_APP_	.env、.env.development、.env.production、.env.local 等