vue项目打包后动态修改环境

3 篇文章 0 订阅
订阅专栏

问题情景

        一般情况下,我们提前知道服务器IP,可以在项目中写死直接打包,把生成的dist包部署到指定服务器中。

        特殊情况下,尤其是一些招标外包项目,客户尚未提供实际生产IP和一些重要参数,开发阶段就需把这些信息进行动态配置,项目打包后也可在不重新打包的前提下修改。

解决方法

        1.在项目文件夹下public中新建一个全局配置文件,如下图 server.js

        

         2.server.js中给window对象挂载全局对象属性

        

        3.index.html中引入server.js

        

         4.如此,项目中就可以直接引入挂载在window中的对象参数了

        

        5.项目打包后的dist结构为下图所示,修改server.js文件内容就可修改打包后的配置参数

        

        

vue项目打包之开发环境和部署环境的实现
10-15
主要介绍了vue项目打包之开发环境和部署环境的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
webpack + vue 打包生成公共配置文件(域名) 方便动态修改
10-16
主要介绍了webpack + vue 打包生成公共配置文件(域名) 方便动态修改,本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
vue环境打包并支持动态修改
qq_43536071的博客
11-14 2775
因为:通过以上方式,config.js是存在vue中的main.js文件的引用链中的,这样webpack会处理成一个js文件,所以修改外面的config.js文件不会影响打包后的js。[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-YZafg6Su-1668414134084)(C:\Users\w\Desktop\1.png)]可以看出config里的配置是被打包到app.xxx.map,这样你修改外层config.js 肯定是失效的。需要config.js 脱离。
已经打包上线的vue代码怎么改_Vue 打包部署上线
weixin_39673601的博客
12-22 3379
1,VUE逻辑编写完成后在当前项目打包npm run build需要注意的是,当打包完毕后,需要将入口的index.html的项目dist路径改成相对路径另外需要注意的一点是,一旦打包vue.js项目,需要确保项目内必须使用vue.js语法来写功能,比如a标签要替换成, 传统的window.location.href跳转页面也要换成this.$router.push({ path: '/home...
项目打包之后对配置文件进行修改
weixin_42069587的博客
05-24 2562
Vue项目中一般都将配置文件写在 .env.development / .env.production 文件当中,但是如果仅仅是因为修改配置文件又重新打包一次就会很繁琐,浪费时间。于是可以将配置文件写在 public / static 文件夹下,此文件夹里面的文件并不会参与打包,所以在打包之后再对配置文件进行修改就会很方便。4. 打包之后config.js文件就会在根目录上,就可以了很方便的对配置信息进行更改。2. 在配置文件中最好套一层立即执行函数,确保这个配置文件是在最开始执行的。
Web前端Vue动态配置启动或打包时的参数、读写文件、设置、writeFileSync、readFileSync、toString、replace、process、join
我的"CSDN"博客主页地址:https://mengjian.blog.csdn.net/
04-17 2012
Web前端Vue动态配置启动或打包时的参数、读写文件、设置、writeFileSync、readFileSync、toString、replace、process、join
vue项目打包后怎样优雅的解决跨域
10-16
综上所述,解决Vue项目打包后跨域问题的方法主要包括使用webpack-dev-server进行代理配置、通过Nginx进行反向代理配置以及通过环境变量设置不同API基础路径。这些方法不仅可以解决跨域问题,而且可以保持开发和部署...
Vue项目打包编译优化方案
10-14
Vue 项目打包编译优化方案...通过以上各种优化措施,可以显著减少 Vue 项目打包后的体积,提高页面加载速度,从而提升用户体验。不过需要注意,每次优化后都需要进行性能测试,以确保优化措施有效且没有引入新的问题。
解决vue+elementui项目打包后样式变化问题
10-15
在使用Vue.js和ElementUI构建项目时,开发者经常会遇到一个问题:在开发环境下一切正常,但一旦执行项目打包,样式就会发生改变,导致页面显示效果与预期不符。这主要是由于CSS加载顺序、模块化打包工具(如Webpack...
vue项目打包之后背景样式丢失的解决方案
10-17
总结一下,Vue项目打包后背景样式丢失的问题主要源于Vue CLI的图片处理策略和生产环境的路径问题。通过在`build/utils.js`中添加适当的配置,我们可以有效地解决这个问题。此外,理解这个过程也有助于我们在其他类似...
vue设置全局配置文件,打包后在dist包内可动态修改配置
weixin_43485503的博客
07-14 6457
vue设置全局配置文件,打包后在dist包内可手动修改配置文件
vue项目根据不同环境动态配置接口请求ip及全局变量(vue环境变量配置
engineerllm的博客
02-03 9614
根据不同的环境切换不同的ip以及环境变量,例如在项目部署到测试服时需要将接口请求ip替换成测试服的ip,部署到正式服时又需要将接口请求ip替换成正式服对应的ip。
VUE在webpack后动态修改配置文件(亲测有效 放心借鉴~)
Bennett_G博客
05-13 2623
webpack vue项目动态修改配置文件前言需求项目环境实现 前言 😑😑😑开始之前,请允许我好好吐槽一下😑😑😑 本想借鉴一下各路神仙的一些骚操作来达到目的,但是结果令人失望之极,千篇一律,关键是方案完全起不到作用,也不清楚为什么还有那么多的人在转载这种方法,感觉有点误人😮😮😮😮 🤬🤬🤬🤬🤬🤬🤬🤬🤬🤬🤬🤬🤬🤬🤬🤬🤬🤬🤬🤬🤬🤬🤬🤬🤬🤬🤬🤬🤬🤬🤬🤬🤬 需求 vue项目在build编译后,通过外部配置文件(如config.json)动态修改打包项目内的API地址 项目环境 vue-cli:v
vue项目标签页,根据public文件的defaultconfig配置文件动态改变
qq_52563030的博客
06-25 302
vue项目标签页,根据public文件的defaultconfig配置文件动态改变
vue项目,通过列表编辑动态实时配置项目名称、项目图标?
SM_Cute的博客
07-05 778
vue项目,通过列表编辑动态实时配置项目名称、项目图标?
Vue3 cli如何抽离出一个配置文件,用于打包动态修改
最新发布
olklj的博客
08-08 930
5. 打包时 config.js 会作为单独的 chunk 进行输出,可以直接修改这样就实现了将配置抽离为单独的文件,打包后可以直接修改配置而不需要重新构建。4. 在代码中可以通过 import 来获取配置
vue项目打包后 希望可以修改配置(接口地址,系统名称等)
六国破灭,非兵不利 ,战不善,弊在赂秦。赂秦而力亏,破灭之道也。或曰:六国互丧,率赂秦耶?曰:不赂者以赂者丧,盖失强援,不能独完。故曰:弊在赂秦也。 秦以攻取之外,小则获邑,大则得城。较秦之所得,与战胜而得者,其实百倍;诸侯之所亡,与战败而亡者,其实亦百
08-09 3224
项目打包发布,之后可能存在接口域名更换,项目名称修改等情况,就需要开发人员重新修改代码,重新发布,比较费时费力。希望可以将这些配置在一个文件中,如需更换,运维可直接打开配置文件,更改保存即生效。......
Vue3 配置config文件,打包后随意修改配置,无需重新打包和重启
Admans的专栏
11-22 4213
在public目录创建config.json文件,名字随便起。刷新页面后即显示新的内容。打开main.js,导入。
Vue项目配置环境打包命令详解
本文主要介绍了如何在Vue项目配置不同环境打包命令,包括正式环境、测试环境和开发环境。通过以下步骤实现环境配置的差异: 1. 安装cross-env: 在Vue项目中,为了能够在不同环境中切换NODE_ENV变量,我们需要...
写文章

热门文章

  • CSS图片间隙问题——原因分析及解决方法 3999
  • git生成ssh密钥并配置到gitLab中 3224
  • Git 配置用户名、邮箱和密码 2429
  • GitLab使用教程 1227
  • vue项目打包后动态修改环境 1144

分类专栏

  • Git 4篇
  • 问题分析与解决 3篇

最新文章

  • git生成ssh密钥并配置到gitLab中
  • GitLab使用教程
  • Git 配置用户名、邮箱和密码
2023年5篇
2022年1篇
2021年1篇

目录

目录

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43元 前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值

深圳坪山网站建设公司北京百度网站优化运营许昌外贸网站优化哪家合适保险行业网站优化比较好猎头简历优化哪个网站好独山县分类网站优化阳阳网站优化关键词排名温州网站优化厂家广州网站建设推广优化许昌网站自然优化报价修武营销网站搭建优化珠海网站优化报价网站如何做优化推广排名茂名安天网站优化快照涿州网站优化公司梁溪网站排名优化软件网站 优化皆选金苹果互联网网站优化包括哪些方面聊城哪里有网站优化开户seo优化 网站网站首页关键如何优化网站图片优化软件网站优化产品在哪里修改网站优化工作计划书模板闵行区优化网站价格石家庄优化网站推广平台网站优化方案弋阳百度网站优化网站seo优化要多少钱河南家纺行业网站优化推广怎么样网站关键词优化收录减少的原因香港通过《维护国家安全条例》两大学生合买彩票中奖一人不认账让美丽中国“从细节出发”19岁小伙救下5人后溺亡 多方发声卫健委通报少年有偿捐血浆16次猝死汪小菲曝离婚始末何赛飞追着代拍打雅江山火三名扑火人员牺牲系谣言男子被猫抓伤后确诊“猫抓病”周杰伦一审败诉网易中国拥有亿元资产的家庭达13.3万户315晚会后胖东来又人满为患了高校汽车撞人致3死16伤 司机系学生张家界的山上“长”满了韩国人?张立群任西安交通大学校长手机成瘾是影响睡眠质量重要因素网友洛杉矶偶遇贾玲“重生之我在北大当嫡校长”单亲妈妈陷入热恋 14岁儿子报警倪萍分享减重40斤方法杨倩无缘巴黎奥运考生莫言也上北大硕士复试名单了许家印被限制高消费奥巴马现身唐宁街 黑色着装引猜测专访95后高颜值猪保姆男孩8年未见母亲被告知被遗忘七年后宇文玥被薅头发捞上岸郑州一火锅店爆改成麻辣烫店西双版纳热带植物园回应蜉蝣大爆发沉迷短剧的人就像掉进了杀猪盘当地回应沈阳致3死车祸车主疑毒驾开除党籍5年后 原水城县长再被查凯特王妃现身!外出购物视频曝光初中生遭15人围殴自卫刺伤3人判无罪事业单位女子向同事水杯投不明物质男子被流浪猫绊倒 投喂者赔24万外国人感慨凌晨的中国很安全路边卖淀粉肠阿姨主动出示声明书胖东来员工每周单休无小长假王树国卸任西安交大校长 师生送别小米汽车超级工厂正式揭幕黑马情侣提车了妈妈回应孩子在校撞护栏坠楼校方回应护栏损坏小学生课间坠楼房客欠租失踪 房东直发愁专家建议不必谈骨泥色变老人退休金被冒领16年 金额超20万西藏招商引资投资者子女可当地高考特朗普无法缴纳4.54亿美元罚金浙江一高校内汽车冲撞行人 多人受伤

深圳坪山网站建设公司 XML地图 TXT地图 虚拟主机 SEO 网站制作 网站优化