位置: IT常识 - 正文

Vue3 —— 使用Vite配置环境变量(vue3 + ts)

编辑:rootadmin
Vue3 —— 使用Vite配置环境变量 文章目录一、为什么要配置环境变量?二、在Vite中配置环境变量

1.环境变量和模式2.环境变量3.生产环境替换4.env 文件总结一、为什么要配置环境变量?

推荐整理分享Vue3 —— 使用Vite配置环境变量(vue3 + ts),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:vue-vite,vue3怎么用,vue3.0 vite,vue3.0 vite,vue3 + ts,vue3+ts+vite,vue3+ts+vite,vue3+vite,内容如对您有帮助,希望把文章链接给更多的朋友!

在一个产品的前端开发过程中,一般来说会经历本地开发、测试脚本、开发自测、测试环境、预上线环境,然后才能正式的发布。对应每一个环境可能都会有所差异,比如说用户访问资源权限、服务器地址、接口地址等。在各个环境切换的时候,就需要不同的配置参数,所以就可以用环境变量和模式,来方便我们管理。

二、在Vite中配置环境变量1.环境变量和模式

因为项目使用VIte创建的,所以在配置环境变量之前我们需要查看在Vite中的环境变量和模式,官网地址 

2.环境变量

Vite 在一个特殊的 import.meta.env 对象上暴露环境变量。这里有一些在所有情况下都可以使用的内建变量:

import.meta.env.MODE: {string} 应用运行的模式。

import.meta.env.BASE_URL: {string} 部署应用时的基本 URL。他由base 配置项决定。

import.meta.env.PROD: {boolean} 应用是否运行在生产环境。

import.meta.env.DEV: {boolean} 应用是否运行在开发环境 (永远与 import.meta.env.PROD相反)。

import.meta.env.SSR: {boolean} 应用是否运行在 server 上。

3.生产环境替换

在生产环境中,这些环境变量会在构建时被静态替换,因此,在引用它们时请使用完全静态的字符串。动态的 key 将无法生效。例如,动态 key 取值 import.meta.env[key] 是无效的。

4.env 文件

在根目录下新建这两个文件

 

Vue3 —— 使用Vite配置环境变量(vue3 + ts)

.env.dev  文件

NODE_ENV = devVITE_NAME="LJY"

.env.pro 文件

NODE_ENV = proVITE_NAME="LJY"

Vite 使用 dotenv 从你的 环境目录 中的下列文件加载额外的环境变量:

环境加载优先级

一份用于指定模式的文件(例如 .env.production)会比通用形式的优先级更高(例如 .env)。

另外,Vite 执行时已经存在的环境变量有最高的优先级,不会被 .env 类文件覆盖。例如当运行 VITE_SOME_KEY=123 vite build 的时候。

.env 类文件会在 Vite 启动一开始时被加载,而改动会在重启服务器后生效。

加载的环境变量也会通过 import.meta.env 以字符串形式暴露给客户端源码。

为了防止意外地将一些环境变量泄漏到客户端,只有以 VITE_ 为前缀的变量才会暴露给经过 vite 处理的代码。例如下面这些环境变量:

VITE_SOME_KEY=123DB_PASSWORD=foobar

只有 VITE_SOME_KEY 会被暴露为 import.meta.env.VITE_SOME_KEY 提供给客户端源码,而 DB_PASSWORD 则不会。

console.log(import.meta.env.VITE_SOME_KEY) // 123console.log(import.meta.env.DB_PASSWORD) // undefined

如果你想自定义 env 变量的前缀,请参阅 envPrefix。

安全注意事项

如果你想要自定义 env 变量的前缀,请参阅 envPrefix 选项。

.env.*.local 文件应是本地的,可以包含敏感变量。你应该将 .local 添加到你的 .gitignore 中,以避免它们被 git 检入。

由于任何暴露给 Vite 源码的变量最终都将出现在客户端包中,VITE_* 变量应该不包含任何敏感信息。

本文链接地址:https://www.jiuchutong.com/zhishi/294593.html 转载请保留说明!

上一篇:vue动态路由添加,vue-router的addRoute方法实现权限控制,添加根路由和子路由(vue 动态添加路由)

下一篇:html制作网页案例代码----(故宫博物馆9页)特效很多(html制作网页教程)

  • 苹果手机软件怎么彻底删除(苹果手机软件怎么下载)

    苹果手机软件怎么彻底删除(苹果手机软件怎么下载)

  • 苹果实体店有教育优惠吗(苹果实体店有教育优惠没有学生证怎么办)

    苹果实体店有教育优惠吗(苹果实体店有教育优惠没有学生证怎么办)

  • 移动手机号可以异地注销吗(移动手机号可以过户给别人吗)

    移动手机号可以异地注销吗(移动手机号可以过户给别人吗)

  • 微信通讯录黑名单怎么彻底删除这个人(微信通讯录黑名单移出来去哪了)

    微信通讯录黑名单怎么彻底删除这个人(微信通讯录黑名单移出来去哪了)

  • 钉钉视频会议屏幕共享视频没有声音(钉钉视频会议屏幕共享后显示学生头像)

    钉钉视频会议屏幕共享视频没有声音(钉钉视频会议屏幕共享后显示学生头像)

  • 新版qq详细资料在哪(qq 详细资料)

    新版qq详细资料在哪(qq 详细资料)

  • 笔记本硬件检测不到独立显卡(笔记本硬件检测要多久)

    笔记本硬件检测不到独立显卡(笔记本硬件检测要多久)

  • oppo水滴屏有哪些型号(oppoa系列水滴屏)

    oppo水滴屏有哪些型号(oppoa系列水滴屏)

  • 苹果xr微信声音怎么关(苹果xr微信声音怎么调大小)

    苹果xr微信声音怎么关(苹果xr微信声音怎么调大小)

  • 手机别人打电话屏幕不显示咋回事(手机别人打电话打不进来怎么回事)

    手机别人打电话屏幕不显示咋回事(手机别人打电话打不进来怎么回事)

  • 电脑不分区有什么影响(电脑不分区什么原因?)

    电脑不分区有什么影响(电脑不分区什么原因?)

  • 5g兼容4g吗(5g网兼容4g网么)

    5g兼容4g吗(5g网兼容4g网么)

  • 如何把歌词放在桌面上(如何把歌词放在桌面)

    如何把歌词放在桌面上(如何把歌词放在桌面)

  • 红米k20屏幕刷新率是多少(红米k20屏幕刷新率)

    红米k20屏幕刷新率是多少(红米k20屏幕刷新率)

  • ipx防水4能不能淋浴(ipx4防水能达到什么地步)

    ipx防水4能不能淋浴(ipx4防水能达到什么地步)

  • 天猫的直通车在哪里找(天猫直通车页面)

    天猫的直通车在哪里找(天猫直通车页面)

  • 荣耀9x语音助手叫什么(荣耀9x语音助手为啥不能直接喊开)

    荣耀9x语音助手叫什么(荣耀9x语音助手为啥不能直接喊开)

  • 芒果tv怎么取消银行卡绑定(芒果tv怎么取消自动登录)

    芒果tv怎么取消银行卡绑定(芒果tv怎么取消自动登录)

  • vivo短信图标怎么恢复(vivo短信图标)

    vivo短信图标怎么恢复(vivo短信图标)

  • 改密码了两个手机还会同步吗(俩个密码解出来的手机为什么不一样)

    改密码了两个手机还会同步吗(俩个密码解出来的手机为什么不一样)

  • 企业开发app作用是什么(企业开发app需要多少钱)

    企业开发app作用是什么(企业开发app需要多少钱)

  • Win11开机蓝屏怎么办? windows蓝屏重启原因分析及解决办法汇总(win11开机蓝屏怎么解决)

    Win11开机蓝屏怎么办? windows蓝屏重启原因分析及解决办法汇总(win11开机蓝屏怎么解决)

  • 怎么让电脑安全关机?(如何让电脑安全)

    怎么让电脑安全关机?(如何让电脑安全)

  • RGB与Depth融合方法总结(rgb to hex)

    RGB与Depth融合方法总结(rgb to hex)

  • 税务稽查以前年度进项税额转出
  • 汽车销售分期付款的账务处理
  • 增值税销项税的计税依据(销售额)包括()
  • 可供出售金融资产公允价值变动
  • 专利没有资本化成本如何入账
  • 开票项目与实际项目不符
  • 毛利率和主营利润率的区别
  • 递延收益怎么交企业所得税
  • 期末结转增值税
  • 企业的成本核算包括
  • 银行利息收入确认时间会计与税法的差异
  • 有了营业执照就可以买社保了吗
  • 怎样算纳税人
  • 税务机关未采集开票信息是什么意思
  • 主营业务收入明细账图片
  • 工程结算完后剩余资金如何处理?
  • 电子发票开给个人怎么处理?
  • 预计产品质量保证损失是什么意思
  • 营业成本过低的原因
  • 预计负债怎么计提递延所得税资产
  • 职工养老金怎么交费
  • 单位撤销无力支付怎么办
  • 公司吸收合并股权
  • 缴纳公积金个人部分会计分录
  • dotnetfx35.exe
  • 资产盘盈盘亏处理
  • 发财树叶子发黄怎样补救
  • 挖机出租给公司
  • node js 安装
  • elementui form rules
  • 小规模纳税人研发费用加计扣除优惠政策
  • 小规模纳税人的企业所得税怎么算
  • 工程施工预付款20%的规定
  • mongodb视频教程
  • 土石方费用入什么科目
  • 旅游公司差额征税如何开票
  • 企业利润分配项目是什么
  • 防伪码显示查询次数和时间
  • 资产持有过程中缴纳的税收有哪些
  • 废旧物资回收公司名称
  • 企业哪些情况下需要交税
  • 以前年度多计收入今年怎么调整
  • 养老保险减免退税政策
  • 利息发票如何做会计分录
  • 存货 跌价
  • 现金支票存根金额怎么写
  • 会计调整以前年度遗留问题查不出来说明怎么写
  • 政府投资资产会计核算科目
  • 2020年专项扣除怎么填
  • 办公室租金发票可以扺增值税吗
  • 无形资产摊销能加计扣除吗
  • 发票提前开能入费用吗?
  • 会计账户分类是什么意思
  • 企业必须设立的账薄
  • 读取mysql binlog
  • win8怎么扩展c盘
  • win10隐藏文件怎么隐藏
  • ubuntu20.04怎么安装
  • winxp系统停止服务
  • xp系统奇怪
  • windows 7磁盘
  • mac内存管理在哪里
  • 你所知道的三维建模软件有哪些?
  • javascript中函数
  • 上传图片 js
  • input和button按钮合到一起
  • perl cgi
  • express常用中间件
  • shell脚本获取进程pid
  • unity的协程
  • Node.js中的事件循环是什么
  • android ios UI
  • shell脚本检查语法
  • unity3d跨平台
  • 税控盘状态
  • 小型微利企业所得税优惠
  • 外经证预缴税款网上流程
  • 中国税务局河北省税务局官网
  • 竣工开始缴房产税吗
  • 税务局的纳税服务中心是干什么的
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设