电脑知识|欧美黑人一区二区三区|软件|欧美黑人一级爽快片淫片高清|系统|欧美黑人狂野猛交老妇|数据库|服务器|编程开发|网络运营|知识问答|技术教程文章 - 好吧啦网

您的位置:首頁技術文章
文章詳情頁

vue項目多環(huán)境配置(.env)的實現(xiàn)

瀏覽:35日期:2022-09-28 10:30:09
目錄什么是多環(huán)境配置,為什么要多環(huán)境配置?.env 文件配置到哪里.env文件如何配置,配置多少個?.env文件的配置如何配置運行環(huán)境如何獲取全局配置項的值如何運行環(huán)境

沒接觸多環(huán)境配置前,感覺好高大上,真正操作后感覺也就那么回事,在此把自己遇到的問題和解決方案敘述一下,有不對的地方歡迎各位大佬指出。

什么是多環(huán)境配置,為什么要多環(huán)境配置?

最常見的多環(huán)境配置,就是開發(fā)環(huán)境配置,和生產(chǎn)環(huán)境配置(也就是上線的配置),很多情況下我們開發(fā)環(huán)境下的域名,和一些配置項,和我們生產(chǎn)模式下的不同,這個時候就需要我們進行多環(huán)境配置,不然每次發(fā)版都要改一波數(shù)據(jù)多麻煩。另一種情況就是你兩個項目是用的一套代碼,但是最后又要分別打成不同的包,那么這個時候多環(huán)境配置就大大提升了開發(fā)效率。

.env 文件配置到哪里

.env文件配置在你項目的根目錄里面和package.json同級如下圖。

vue項目多環(huán)境配置(.env)的實現(xiàn)

.env文件如何配置,配置多少個?

.env文件如何命名?最開始我在網(wǎng)上查的時候好多博主說名字必須命名成.env.development 開發(fā)環(huán)境下的配置文件.env.production 生產(chǎn)環(huán)境下的配置文件其實不是的,如果你配置的是開發(fā)環(huán)境和生產(chǎn)環(huán)境那么這樣命名,無可厚非,但是你如果是多項目公用代碼,這樣命名就有點驢頭不對馬嘴。所以這塊的命名格式只需要文件開頭為.env即可,后面的名字你想怎樣都可以

.env文件的配置

這塊就是你想用什么東西就配置什么東西,打個比方我想在項目全局拿到一個名字,那你就直接.env里面配置就ok了,下面我會詳細敘述如何取值。

npm run serve 或者npm run build 的時候,會默認走.env的配置

圖示:

vue項目多環(huán)境配置(.env)的實現(xiàn)

//這塊只需要 VUE_APP_*** 以這樣的形式命名就ok了,后面大寫還是小寫這塊看你心情都可以。VUE_APP_NAME = ’婁淵洋’VUE_APP_HTTPS = ’http://www.louhc.com/’VUE_APP_ABBREVIATION = ’louhc’VUE_APP_LOGO = ’louhc’

默認的.env文件配置好后,我們接著配置有特殊需求的.env文件,比如我想讓在另一種環(huán)境下使用 其他的名字。例如 .env.bsy文件 .bsy是我隨便寫的名字這塊可以自定義。

//這塊只需要 VUE_APP_*** 以這樣的形式命名就ok了,后面大寫還是小寫這塊看你心情都可以。VUE_APP_NAME = ’白衫云’VUE_APP_HTTPS = ’http://www.louhc.com:82/’VUE_APP_ABBREVIATION = ’bsy’VUE_APP_LOGO = ’bsy’

依次類推你想配置多少個都可以.env文件配好后我們就該配置運行環(huán)境了

如何配置運行環(huán)境

找到package.json文件,如下圖

vue項目多環(huán)境配置(.env)的實現(xiàn)

build: 和 serve: 后面跟的名字就是你隨便起的名字一定要對應上,這在運行的時候才能找到相應的配置項。

'scripts': { 'serve': 'vue-cli-service serve', 'build': 'vue-cli-service build', 'build:bsy': 'vue-cli-service build --mode bsy', 'build:kthz': 'vue-cli-service build --mode kthz', 'serve:bsy': 'vue-cli-service serve --mode bsy', 'serve:kthz': 'vue-cli-service serve --mode kthz', },

再次多說一點:.env是默認配置項,當運行環(huán)境配置項的時候,會將默認配置項和運行的環(huán)境配置項融合,在參數(shù)相同的情況下,會以環(huán)境配置項為主,簡單來說就是,默認配置項存在,環(huán)境配置項也存在,這個時候運行哪個環(huán)境配置項,就以哪個環(huán)境配置項的值為準,如果默認配置項存在,環(huán)境配置項不存在,那么運行環(huán)境配置項的時候同樣也可以拿到默認配置項的值。

如何獲取全局配置項的值

例子:如何我想在js中拿到 VUE_APP_NAME = ‘婁淵洋’,那么這直接在你想賦值的地方寫上這行代碼即可 process.env.VUE_APP_NAME

console.log(process.env.VUE_APP_NAME)// 默認環(huán)境下打印的就是婁淵洋 bsy 環(huán)境下就是 白衫云

如果我們項在html中使用全局配置項的值,需要我們先在return 中賦值一下,然后 才可以通過 {{}},拿到你想要用的值。

如何運行環(huán)境

運行默認環(huán)境 npm run serve運行指定的環(huán)境 npm run serve:bsy默認環(huán)境打包 npm run build指定環(huán)境打包 npm run build:bsy只需切換不同的環(huán)境名即可

到此這篇關于vue項目多環(huán)境配置(.env)的實現(xiàn)的文章就介紹到這了,更多相關vue 多環(huán)境配置內(nèi)容請搜索好吧啦網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持好吧啦網(wǎng)!

標簽: Vue
相關文章:
主站蜘蛛池模板: 黑龙江「京科脑康」医院-哈尔滨失眠医院_哈尔滨治疗抑郁症医院_哈尔滨精神心理医院 | 网站优化公司_SEO优化_北京关键词百度快速排名-智恒博网络 | 上海公众号开发-公众号代运营公司-做公众号的公司企业服务商-咏熠软件 | 台湾Apex减速机_APEX行星减速机_台湾精锐减速机厂家代理【现货】-杭州摩森机电 | 轻型地埋电缆故障测试仪,频响法绕组变形测试仪,静荷式卧式拉力试验机-扬州苏电 | 广西资质代办_建筑资质代办_南宁资质代办理_新办、增项、升级-正明集团 | 短信营销平台_短信群发平台_106短信发送平台-河南路尚 | 高铝轻质保温砖_刚玉莫来石砖厂家_轻质耐火砖价格 | 水平垂直燃烧试验仪-灼热丝试验仪-漏电起痕试验仪-针焰试验仪-塑料材料燃烧检测设备-IP防水试验机 | 对辊破碎机-液压双辊式,强力双齿辊,四辊破碎机价格_巩义市金联机械设备生产厂家 | 电动打包机_气动打包机_钢带捆扎机_废纸打包机_手动捆扎机 | 小威小说网 - 新小威小说网 - 小威小说网小说搜索引擎 | 企典软件一站式企业管理平台,可私有、本地化部署!在线CRM客户关系管理系统|移动办公OA管理系统|HR人事管理系统|人力 | 东莞动力锂电池保护板_BMS智能软件保护板_锂电池主动均衡保护板-东莞市倡芯电子科技有限公司 | 广东教师资格网-广东教师资格证考试网| 氧化锆纤维_1800度高温退火炉_1800度高温烧结炉-南京理工宇龙新材料股份有限公司 | 水厂污泥地磅|污泥处理地磅厂家|地磅无人值守称重系统升级改造|地磅自动称重系统维修-河南成辉电子科技有限公司 | 厦门ISO认证|厦门ISO9001认证|厦门ISO14001认证|厦门ISO45001认证-艾索咨询专注ISO认证行业 | 宝元数控系统|对刀仪厂家|东莞机器人控制系统|东莞安川伺服-【鑫天驰智能科技】 | 冷水机,风冷冷水机,水冷冷水机,螺杆冷水机专业制造商-上海祝松机械有限公司 | 今日热点_实时热点_奇闻异事_趣闻趣事_灵异事件 - 奇闻事件 | 德国EA可编程直流电源_电子负载,中国台湾固纬直流电源_交流电源-苏州展文电子科技有限公司 | 上海刑事律师|刑事辩护律师|专业刑事犯罪辩护律师免费咨询-[尤辰荣]金牌上海刑事律师团队 | 杭州代理记账费用-公司注销需要多久-公司变更监事_杭州福道财务管理咨询有限公司 | EFM 022静电场测试仪-套帽式风量计-静电平板监测器-上海民仪电子有限公司 | 浙江华锤电器有限公司_地磅称重设备_防作弊地磅_浙江地磅售后维修_无人值守扫码过磅系统_浙江源头地磅厂家_浙江工厂直营地磅 | 中药超微粉碎机(中药细胞级微粉碎)-百科| SRRC认证|CCC认证|CTA申请_IMEI|MAC地址注册-英利检测 | 蓄电池回收,ups电池后备电源回收,铅酸蓄电池回收,机房电源回收-广州益夫铅酸电池回收公司 | 全自动过滤器_反冲洗过滤器_自清洗过滤器_量子除垢环_量子环除垢_量子除垢 - 安士睿(北京)过滤设备有限公司 | 磁力抛光机_磁力研磨机_磁力去毛刺机_精密五金零件抛光设备厂家-冠古科技 | 火锅加盟_四川成都火锅店加盟_中国火锅连锁品牌十强_朝天门火锅【官网】 | 全自动烧卖机厂家_饺子机_烧麦机价格_小笼汤包机_宁波江北阜欣食品机械有限公司 | b2b网站大全,b2b网站排名,找b2b网站就上地球网 | 1000帧高速摄像机|工业高速相机厂家|科天健光电技术 | 高压油管,液压接头,液压附件-烟台市正诚液压附件 | 自清洗过滤器-全自动自清洗过反冲洗过滤器 - 中乂(北京)科技有限公司 | _网名词典_网名大全_qq网名_情侣网名_个性网名 | 步进驱动器「一体化」步进电机品牌厂家-一体式步进驱动 | 茶楼装修设计_茶馆室内设计效果图_云臻轩茶楼装饰公司 | 山东商品混凝土搅拌楼-环保型搅拌站-拌合站-分体仓-搅拌机厂家-天宇 |