Vue开发项目过程中环境变量的配置(vite、vue3、ts)

简介: Vue开发项目过程中环境变量的配置(vite、vue3、ts)

项目开发过程中,至少会经历开发环境、测试环境和生产环境(即正式环境)三个阶段。不同阶段请求的状态(如接口地址等)不尽相同,若手动切换接口地址是相当繁琐且易出错的。于是环境变量配置的需求就应运而生,我们只需做简单的配置,把环境状态切换的工作交给代码。


开发环境(development)

顾名思义,开发使用的环境,每位开发人员在自己的dev分支上干活,开发到一定程度,同事会合并代码,进行联调。

测试环境(testing)

测试同事干活的环境啦,一般会由测试同事自己来部署,然后在此环境进行测试


生产环境(production)


生产环境是指正式提供对外服务的,一般会关掉错误报告,打开错误日志。(正式提供给客户使用的环境。)


注意:一般情况下,一个环境对应一台服务器,也有的公司开发与测试环境是一台服务器!!!


项目根目录分别添加开发、生产和测试环境的文件!

在相应的环境配置文件当中去放置一些变量

.env.development // 开发
.env.production // 生产
.env.test // 测试

在根目录下配置相关文件:

单词可不要拼错哈 dego~



# 变量必须以 VITE_ 为前缀才能暴露给外部读取
NODE_ENV = 'development'
VITE_APP_TITLE = 'IKUN-UI展示实现平台'
VITE_APP_BASE_API = '/dev-api'
VITE_SERVER = 'http://localhost:8080/'
NODE_ENV = 'production'
VITE_APP_TITLE = 'IKUN-UI展示实现平台'
VITE_APP_BASE_API = '/prod-api'
VITE_SERVER = 'http://localhost:8080/'
NODE_ENV = 'test'
VITE_APP_TITLE = 'IKUN-UI展示实现平台'
VITE_APP_BASE_API = '/test-api'
VITE_SERVER = 'http://localhost:8080/'

找到 package.json 文件进行配置不同环境下的打包命令

  "scripts": {
    "dev": "vite --open",
    "build": "vue-tsc && vite build",  // 开发
    "build:test": "vue-tsc  && vite build --mode test", // 测试
    "build:pro": "vue-tsc && vite build --mode production",  // 生产
    "preview": "vite preview"
  },

如下是处于开发环境,这样( import.meta.env )就获取到了开发环境下对应的变量的值:

import { createApp } from 'vue'
import App from '@/App.vue'

console.log(import.meta.env)
createApp(App).mount('#app')

目录
相关文章
|
7天前
|
JavaScript
Vue中如何实现兄弟组件之间的通信
在Vue中,兄弟组件可通过父组件中转、事件总线、Vuex/Pinia或provide/inject实现通信。小型项目推荐父组件中转或事件总线,大型项目建议使用Pinia等状态管理工具,确保数据流清晰可控,避免内存泄漏。
86 2
|
3月前
|
人工智能 JavaScript 算法
Vue 中 key 属性的深入解析:改变 key 导致组件销毁与重建
Vue 中 key 属性的深入解析:改变 key 导致组件销毁与重建
522 0
|
2月前
|
JavaScript 安全
在 Vue 中,如何在回调函数中正确使用 this?
在 Vue 中,如何在回调函数中正确使用 this?
100 0
|
2月前
|
人工智能 JSON JavaScript
VTJ.PRO 首发 MasterGo 设计智能识别引擎,秒级生成 Vue 代码
VTJ.PRO发布「AI MasterGo设计稿识别引擎」,成为全球首个支持解析MasterGo原生JSON文件并自动生成Vue组件的AI工具。通过双引擎架构,实现设计到代码全流程自动化,效率提升300%,助力企业降本增效,引领“设计即生产”新时代。
231 1
|
JSON 缓存 资源调度
vite 如何做到让 vue 本地开发更快速?
## vite 是什么 [vite](https://github.com/vuejs/vite)——一个由 vue 作者[尤雨溪](https://github.com/yyx990803)专门为 vue 打造的开发利器,其目的是使 vue 项目的开发更加简单和快速。   vite 究竟有什么作用?用 vite 文档上的介绍,它具有以下特点: 1. 快速的冷启动 1. 即时的热模块
10164 2
vite 如何做到让 vue 本地开发更快速?
|
3月前
|
JavaScript UED
用组件懒加载优化Vue应用性能
用组件懒加载优化Vue应用性能
|
5月前
|
JavaScript
vue实现任务周期cron表达式选择组件
vue实现任务周期cron表达式选择组件
741 4
|
4月前
|
JavaScript 数据可视化 前端开发
基于 Vue 与 D3 的可拖拽拓扑图技术方案及应用案例解析
本文介绍了基于Vue和D3实现可拖拽拓扑图的技术方案与应用实例。通过Vue构建用户界面和交互逻辑,结合D3强大的数据可视化能力,实现了力导向布局、节点拖拽、交互事件等功能。文章详细讲解了数据模型设计、拖拽功能实现、组件封装及高级扩展(如节点类型定制、连接样式优化等),并提供了性能优化方案以应对大数据量场景。最终,展示了基础网络拓扑、实时更新拓扑等应用实例,为开发者提供了一套完整的实现思路和实践经验。
528 77
|
5月前
|
缓存 JavaScript 前端开发
Vue 基础语法介绍
Vue 基础语法介绍
|
3月前
|
JavaScript 前端开发 开发者
Vue 自定义进度条组件封装及使用方法详解
这是一篇关于自定义进度条组件的使用指南和开发文档。文章详细介绍了如何在Vue项目中引入、注册并使用该组件,包括基础与高级示例。组件支持分段配置(如颜色、文本)、动画效果及超出进度提示等功能。同时提供了完整的代码实现,支持全局注册,并提出了优化建议,如主题支持、响应式设计等,帮助开发者更灵活地集成和定制进度条组件。资源链接已提供,适合前端开发者参考学习。
361 17