持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第2天，点击查看活动详情
如标题所示：我要在vue3项目使用.env文件。
先介绍一下项目背景，项目使用VUE3.2 + vite2.9 + typescript搭建。
我基本断定，vue3使用.env文件的方法可能和vue2使用.env文件的方法可能是不同，关于vue2项目如何使用.env文件，请移步《VUE2（七）VUE配置env文件使用》
简单说一下就是vue2使用.env文件是基于process.env来获取env文件中的变量。
正文开始之前，还是要强调一下，下面的内容是针对vite搭建的项目，针对使用vue-cli搭建的项目是不能用的……切记。
基于vite搭建的项目使用.env文件比较简单，创建一个.env文件，在文件中定义好变量，在文件中使用：
import.meta.env.VITE_NODE_ENV
sequenceDiagram
Alice->>John: Hello John, how are you?
John-->>Alice: Great!
Alice-)John: See you later!
调用变量即可，对，你没看错，就是这么简单。
那我们来测试一下，创建一个.env文件：
如下图所示：
文件内容如下：
#系统域名
VITE_APP_DOMAIN_URL=http://s.guanchao.site
在main.ts中添加如下代码：
console.log(import.meta.env. VITE_APP_DOMAIN_URL);
效果如下图所示：
当然，文章没有到此结束，既然调用这么简单，那我就定义几个不同环境使用的env文件好了。试试。
我们这里分别创建了.env.develop与.env.production文件。文件内容如下所示：
.env.develop：
#系统域名
VITE_APP_DOMAIN_URL=https://l.guanchao.site
.env.production
#系统域名
VITE_APP_DOMAIN_URL=https://guanchao.site
接下来，我们在package.json文件中添加如下代码：
"develop": "vite --mode develop",
"production": "vite --mode production"
如下图所示：
我们还是使用vue ui来启动项目：如下图所示
我们这里使用develop模式来启动项目，main.ts中的console.log输出如下图所示：
嗯，配置没有问题。可以正常输出.env.develop文件中变量的内容。
接下来，我们看一下打包的使用情况。
我们继续在package.json文件中添加如下代码：
"develop_build": "vite build --mode develop",
"production_build": "vite build --mode production"
如下图所示：
来，我们使用develop_build打个包，上传至服务器上，看看线上输入是什么情况，如下图所示：
至此，基于vite搭建的VUE3项目配置使用.env文件完成。
有好的建议，请在下方输入你的评论。
欢迎访问个人博客 guanchao.site
欢迎访问我的小程序：打开微信->发现->小程序->搜索“时间里的”
