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

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

目录
相关文章
|
18天前
|
JavaScript 前端开发 开发者
Vue 3中的Proxy
【10月更文挑战第23天】Vue 3中的`Proxy`为响应式系统带来了更强大、更灵活的功能,解决了Vue 2中响应式系统的一些局限性,同时在性能方面也有一定的提升,为开发者提供了更好的开发体验和性能保障。
41 7
|
19天前
|
前端开发 数据库
芋道框架审批流如何实现(Cloud+Vue3)
芋道框架审批流如何实现(Cloud+Vue3)
39 3
|
18天前
|
JavaScript 数据管理 Java
在 Vue 3 中使用 Proxy 实现数据双向绑定的性能如何?
【10月更文挑战第23天】Vue 3中使用Proxy实现数据双向绑定在多个方面都带来了性能的提升,从更高效的响应式追踪、更好的初始化性能、对数组操作的优化到更优的内存管理等,使得Vue 3在处理复杂的应用场景和大量数据时能够更加高效和稳定地运行。
36 1
|
18天前
|
JavaScript 开发者
在 Vue 3 中使用 Proxy 实现数据的双向绑定
【10月更文挑战第23天】Vue 3利用 `Proxy` 实现了数据的双向绑定,无论是使用内置的指令如 `v-model`,还是通过自定义事件或自定义指令,都能够方便地实现数据与视图之间的双向交互,满足不同场景下的开发需求。
39 1
|
20天前
|
前端开发 JavaScript 容器
在 vite+vue 中使用@originjs/vite-plugin-federation 模块联邦
【10月更文挑战第25天】模块联邦是一种强大的技术,它允许将不同的微前端模块组合在一起,形成一个统一的应用。在 vite+vue 项目中,使用@originjs/vite-plugin-federation 模块联邦可以实现高效的模块共享和组合。通过本文的介绍,相信你已经了解了如何在 vite+vue 项目中使用@originjs/vite-plugin-federation 模块联邦,包括安装、配置和使用等方面。在实际开发中,你可以根据自己的需求和项目的特点,灵活地使用模块联邦,提高项目的可维护性和扩展性。
|
20天前
|
前端开发 JavaScript
简记 Vue3(一)—— setup、ref、reactive、toRefs、toRef
简记 Vue3(一)—— setup、ref、reactive、toRefs、toRef
|
JavaScript 索引
VUE文件的创建
第一步创建完VUE 项目之后 可以根据自己的需求 创建自己的文件目录(下图是我的文件目录,当然每个人的创建目录的风格也是不同的所以不做严格的规范) 模块文生成    components文件夹下创建  模块文件名字.
801 0
|
8天前
|
JavaScript 前端开发
如何在 Vue 项目中配置 Tree Shaking?
通过以上针对 Webpack 或 Rollup 的配置方法,就可以在 Vue 项目中有效地启用 Tree Shaking,从而优化项目的打包体积,提高项目的性能和加载速度。在实际配置过程中,需要根据项目的具体情况和需求,对配置进行适当的调整和优化。
|
8天前
|
存储 缓存 JavaScript
在 Vue 中使用 computed 和 watch 时,性能问题探讨
本文探讨了在 Vue.js 中使用 computed 计算属性和 watch 监听器时可能遇到的性能问题,并提供了优化建议,帮助开发者提高应用性能。
|
8天前
|
存储 缓存 JavaScript
如何在大型 Vue 应用中有效地管理计算属性和侦听器
在大型 Vue 应用中,合理管理计算属性和侦听器是优化性能和维护性的关键。本文介绍了如何通过模块化、状态管理和避免冗余计算等方法,有效提升应用的响应性和可维护性。