如标题所示:我要在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
欢迎访问我的小程序:打开微信->发现->小程序->搜索“时间里的”