前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >Vue开发项目过程中环境变量的配置(vite、vue3、ts)

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

作者头像
HelloWorldZ
发布2024-05-24 14:11:10
910
发布2024-05-24 14:11:10
举报
文章被收录于专栏:前端开发前端开发

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

开发环境(development)

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

测试环境(testing)

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

生产环境(production)

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

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

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

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

代码语言:javascript
复制
.env.development // 开发
.env.production // 生产
.env.test // 测试

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

单词可不要拼错哈 dego~

在这里插入图片描述
在这里插入图片描述
代码语言:javascript
复制
# 变量必须以 VITE_ 为前缀才能暴露给外部读取
NODE_ENV = 'development'
VITE_APP_TITLE = 'IKUN-UI展示实现平台'
VITE_APP_BASE_API = '/dev-api'
VITE_SERVER = 'http://localhost:8080/'
代码语言:javascript
复制
NODE_ENV = 'production'
VITE_APP_TITLE = 'IKUN-UI展示实现平台'
VITE_APP_BASE_API = '/prod-api'
VITE_SERVER = 'http://localhost:8080/'
代码语言:javascript
复制
NODE_ENV = 'test'
VITE_APP_TITLE = 'IKUN-UI展示实现平台'
VITE_APP_BASE_API = '/test-api'
VITE_SERVER = 'http://localhost:8080/'

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

代码语言:javascript
复制
  "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 )就获取到了开发环境下对应的变量的值:

代码语言:javascript
复制
import { createApp } from 'vue'
import App from '@/App.vue'

console.log(import.meta.env)
createApp(App).mount('#app')
在这里插入图片描述
在这里插入图片描述
本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2024-05-19,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
相关产品与服务
腾讯云服务器利旧
云服务器(Cloud Virtual Machine,CVM)提供安全可靠的弹性计算服务。 您可以实时扩展或缩减计算资源,适应变化的业务需求,并只需按实际使用的资源计费。使用 CVM 可以极大降低您的软硬件采购成本,简化 IT 运维工作。
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档