位置: 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制作网页教程)

  • 非居民纳税机构都包含哪些?
  • 企业间无偿划转资产,非关联方经营
  • 一般风险准备是留存收益吗
  • 国外酒店打印的住宿单可以入账吗
  • 残保金计算包括五险一金吗
  • 小规模纳税人专票税率是多少
  • 个体工商户开普票流程
  • 小规模残保金优惠政策2019
  • 提供劳务企业所得税纳税义务发生时间
  • 土地增值税怎么做账
  • 机器设备的损耗属于什么会计科目类别
  • 专票作废后怎样退税
  • 环境保护税法什么时候出台
  • 小规模企业资本结构
  • 确认坏账损失的分录怎么做
  • 公司没有残疾人需要缴纳残保金吗
  • 存货清查的步骤
  • 预提返利的会计处理
  • PHP Warning:PHP Startup: in Unknown on line 0解决办法
  • php表单验证实例
  • 上季度成本多结转了怎么调
  • 蟹爪兰的养殖方法和浇水
  • 白 犀牛
  • 以前年度少记税金及附加
  • vue.js如何安装
  • xss攻击解决方案
  • 企业所得税季报营业成本包括哪些
  • 营业外支出贷方在利润表怎么体现
  • 小规模资产负债表怎么填写
  • 增值税税点怎么算3个点
  • python字符串方法总结
  • php上传文件代码iapp
  • opengl全称
  • 织梦如何添加浮动广告
  • 公司没有车加油费怎么报
  • 折旧率多少正常
  • sql server2008中删除表中记录的命令
  • 合伙企业税务处理办法
  • 企业当期营业收入的计算
  • 其他应收款收不回来怎么写情况说明
  • 小规模纳税人收普票和专票有什么区别
  • 企业所得税如何规避
  • 申报抵扣了不做账怎么处理?
  • 房地产企业印花税计入什么科目
  • 应记入营业外支出的科目核算是
  • 业务招待费需附上清单
  • 企业职工福利费可用于职工的医疗卫生费用
  • 增值税留抵退税最新政策
  • 小规模纳税人如何缴纳企业所得税
  • linux重置开机密码
  • Mysql 5.7.19 winx64 ZIP Archive 安装及使用过程问题小结
  • win8.1开机速度慢
  • 苹果mac系统如何升级最新版本
  • win7无法开机怎么进入安全模式
  • ubuntu系统安装程序
  • windows 8.1更新
  • 部分用户开启隐私,暂时无法查看怎么办
  • qq突然显示windows登录
  • linux修改用户名
  • 联想电脑win7系统开机修改开机密码
  • win10mobile还能用吗
  • windows10离线地图
  • win10预览版和正式版区别
  • linux常用的帮助命令
  • node.js中用什么方法处理get、post请求的参数
  • unity3d插件手机版
  • js动态改变div内容
  • Tiled GPU perf. warning: RenderTexture color surface (0x0) was not cleared/discarded
  • python中的range和arange
  • javascript中函数的作用域分为全局作用域
  • apple开发
  • javascript原生函数的源代码
  • jquery formbuilder
  • 车船税每年多少钱
  • 税务相关文件
  • 重庆市电子税务局电话
  • 没有税费种认定信息是什么意思
  • 石油产品消费税征收
  • 要深化税收制度改革健全
  • 大兴区地方税务局
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设