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

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

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
相關文章:
主站蜘蛛池模板: 阻垢剂-反渗透缓蚀阻垢剂厂家-山东鲁东环保科技有限公司 | LINK FASHION 童装·青少年装展 河南卓美创业科技有限公司-河南卓美防雷公司-防雷接地-防雷工程-重庆避雷针-避雷器-防雷检测-避雷带-避雷针-避雷塔、机房防雷、古建筑防雷等-山西防雷公司 | 塑料异型材_PVC异型材_封边条生产厂家_PC灯罩_防撞扶手_医院扶手价格_东莞市怡美塑胶制品有限公司 | 中式装修设计_全屋定制家具_实木仿古门窗花格厂家-喜迎门 | 硅胶制品-硅橡胶制品-东莞硅胶制品厂家-广东帝博科技有限公司 | 药品/药物稳定性试验考察箱-埃里森仪器设备(上海)有限公司 | 防爆暖风机_防爆电暖器_防爆电暖风机_防爆电热油汀_南阳市中通智能科技集团有限公司 | 长沙中央空调维修,中央空调清洗维保,空气能热水工程,价格,公司就找维小保-湖南维小保环保科技有限公司 | 安徽成考网-安徽成人高考网| 土壤养分检测仪_肥料养分检测仪_土壤水分检测仪-山东莱恩德仪器 大型多片锯,圆木多片锯,方木多片锯,板材多片锯-祥富机械有限公司 | 【德信自动化】点胶机_全自动点胶机_自动点胶机厂家_塑料热压机_自动螺丝机-深圳市德信自动化设备有限公司 | 空气能采暖,热泵烘干机,空气源热水机组|设备|厂家,东莞高温热泵_正旭新能源 | 硅胶制品-硅橡胶制品-东莞硅胶制品厂家-广东帝博科技有限公司 | 精雕机-火花机-精雕机 cnc-高速精雕机-电火花机-广东鼎拓机械科技有限公司 | 河南卓美创业科技有限公司-河南卓美防雷公司-防雷接地-防雷工程-重庆避雷针-避雷器-防雷检测-避雷带-避雷针-避雷塔、机房防雷、古建筑防雷等-山西防雷公司 | 楼承板-开口楼承板-闭口楼承板-无锡海逵 | 数控专用机床,专用机床,自动线,组合机床,动力头,自动化加工生产线,江苏海鑫机床有限公司 | 佛山商标注册_商标注册代理|专利注册申请_商标注册公司_鸿邦知识产权 | 风化石头制砂机_方解石制砂机_瓷砖石子制砂机_华盛铭厂家 | 中空玻璃生产线,玻璃加工设备,全自动封胶线,铝条折弯机,双组份打胶机,丁基胶/卧式/立式全自动涂布机,玻璃设备-山东昌盛数控设备有限公司 | 焊缝跟踪系统_激光位移传感器_激光焊缝跟踪传感器-创想智控 | 99文库_实习生实用的范文资料文库站| 金属检测机_金属分离器_检针验针机_食品药品金属检探测仪器-广东善安科技 | 欧洲MV日韩MV国产_人妻无码一区二区三区免费_少妇被 到高潮喷出白浆av_精品少妇自慰到喷水AV网站 | 硅PU球场、篮球场地面施工「水性、环保、弹性」硅PU材料生产厂家-广东中星体育公司 | 网站建设-临朐爱采购-抖音运营-山东兆通网络科技 | 伺服电机维修、驱动器维修「安川|三菱|松下」伺服维修公司-深圳华创益 | 常州减速机_减速机厂家_常州市减速机厂有限公司 | 工业洗衣机_工业洗涤设备_上海力净工业洗衣机厂家-洗涤设备首页 bkzzy在职研究生网 - 在职研究生招生信息咨询平台 | 安徽净化工程设计_无尘净化车间工程_合肥净化实验室_安徽创世环境科技有限公司 | 出国劳务公司_正规派遣公司[严海] | 长沙广告公司|长沙广告制作设计|长沙led灯箱招牌制作找望城湖南锦蓝广告装饰工程有限公司 | 无硅导热垫片-碳纤维导热垫片-导热相变材料厂家-东莞市盛元新材料科技有限公司 | 服务器之家 - 专注于服务器技术及软件下载分享 | 微波萃取合成仪-电热消解器价格-北京安合美诚科学仪器有限公司 | FFU_空气初效|中效|高效过滤器_空调过滤网-广州梓净净化设备有限公司 | 多功能三相相位伏安表-变压器短路阻抗测试仪-上海妙定电气 | 小型数控车床-数控车床厂家-双头数控车床| 仿古瓦,仿古金属瓦,铝瓦,铜瓦,铝合金瓦-西安东申景观艺术工程有限公司 | 德国EA可编程直流电源_电子负载,中国台湾固纬直流电源_交流电源-苏州展文电子科技有限公司 | 深圳工程师职称评定条件及流程_深圳职称评审_职称评审-职称网 |