VUE3（三十五）vite构建的项目配置使用.env文件

如标题所示：我要在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

欢迎访问我的小程序：打开微信->发现->小程序->搜索“时间里的”