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

简介: VUE3(三十五)vite构建的项目配置使用.env文件如标题所示:我要在vue3项目使用.env文件。先介绍一下项目背景,项目使用VUE3.2 + vite2.9 + typescript搭建。我基本断定,vue3使用.env文件的方法可能和vue2使用.env文件的方法可能是不同,关于vue2项目如何使用.env文件,请移步《VUE2(七)VUE配置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文件:

如下图所示:

image.png

文件内容如下:

#系统域名
VITE_APP_DOMAIN_URL=http://s.guanchao.site

在main.ts中添加如下代码:

console.log(import.meta.env. VITE_APP_DOMAIN_URL);

效果如下图所示:

image.png

当然,文章没有到此结束,既然调用这么简单,那我就定义几个不同环境使用的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"

如下图所示:

image.png

我们还是使用vue ui来启动项目:如下图所示

image.png

我们这里使用develop模式来启动项目,main.ts中的console.log输出如下图所示:

image.png

嗯,配置没有问题。可以正常输出.env.develop文件中变量的内容。

接下来,我们看一下打包的使用情况。

我们继续在package.json文件中添加如下代码:

"develop_build": "vite build --mode develop",
    "production_build": "vite build --mode production"

如下图所示:

image.png

来,我们使用develop_build打个包,上传至服务器上,看看线上输入是什么情况,如下图所示:

image.png

至此,基于vite搭建的VUE3项目配置使用.env文件完成。

有好的建议,请在下方输入你的评论。

欢迎访问个人博客 guanchao.site

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

目录
相关文章
|
8天前
|
JavaScript 前端开发 开发者
Vue 3中的Proxy
【10月更文挑战第23天】Vue 3中的`Proxy`为响应式系统带来了更强大、更灵活的功能,解决了Vue 2中响应式系统的一些局限性,同时在性能方面也有一定的提升,为开发者提供了更好的开发体验和性能保障。
23 7
|
9天前
|
前端开发 数据库
芋道框架审批流如何实现(Cloud+Vue3)
芋道框架审批流如何实现(Cloud+Vue3)
29 3
|
8天前
|
JavaScript 数据管理 Java
在 Vue 3 中使用 Proxy 实现数据双向绑定的性能如何?
【10月更文挑战第23天】Vue 3中使用Proxy实现数据双向绑定在多个方面都带来了性能的提升,从更高效的响应式追踪、更好的初始化性能、对数组操作的优化到更优的内存管理等,使得Vue 3在处理复杂的应用场景和大量数据时能够更加高效和稳定地运行。
28 1
|
8天前
|
JavaScript 开发者
在 Vue 3 中使用 Proxy 实现数据的双向绑定
【10月更文挑战第23天】Vue 3利用 `Proxy` 实现了数据的双向绑定,无论是使用内置的指令如 `v-model`,还是通过自定义事件或自定义指令,都能够方便地实现数据与视图之间的双向交互,满足不同场景下的开发需求。
28 1
|
10天前
|
前端开发 JavaScript
简记 Vue3(一)—— setup、ref、reactive、toRefs、toRef
简记 Vue3(一)—— setup、ref、reactive、toRefs、toRef
|
12天前
|
数据采集 监控 JavaScript
在 Vue 项目中使用预渲染技术
【10月更文挑战第23天】在 Vue 项目中使用预渲染技术是提升 SEO 效果的有效途径之一。通过选择合适的预渲染工具,正确配置和运行预渲染操作,结合其他 SEO 策略,可以实现更好的搜索引擎优化效果。同时,需要不断地监控和优化预渲染效果,以适应不断变化的搜索引擎环境和用户需求。
|
4天前
|
JavaScript
Vue基础知识总结 4:vue组件化开发
Vue基础知识总结 4:vue组件化开发
|
4天前
|
存储 JavaScript
Vue 状态管理工具vuex
Vue 状态管理工具vuex
|
12天前
|
缓存 JavaScript 搜索推荐
Vue SSR(服务端渲染)预渲染的工作原理
【10月更文挑战第23天】Vue SSR 预渲染通过一系列复杂的步骤和机制,实现了在服务器端生成静态 HTML 页面的目标。它为提升 Vue 应用的性能、SEO 效果以及用户体验提供了有力的支持。随着技术的不断发展,Vue SSR 预渲染技术也将不断完善和创新,以适应不断变化的互联网环境和用户需求。
30 9
|
11天前
|
缓存 JavaScript UED
Vue 中实现组件的懒加载
【10月更文挑战第23天】组件的懒加载是 Vue 应用中提高性能的重要手段之一。通过合理运用动态导入、路由配置等方式,可以实现组件的按需加载,减少资源浪费,提高应用的响应速度和用户体验。在实际应用中,需要根据具体情况选择合适的懒加载方式,并结合性能优化的其他措施,以打造更高效、更优质的 Vue 应用。