位置: IT常识 - 正文

vue打包之后,可以进行修改配置后端地址、端口等信息方法(vue打包注意事项)

编辑:rootadmin
vue打包之后,可以进行修改配置后端地址、端口等信息方法 前言

推荐整理分享vue打包之后,可以进行修改配置后端地址、端口等信息方法(vue打包注意事项),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:vue 打包后,vue 打包后,vue打包注意事项,vue 打包后,vue打包后会生成哪些文件,vue打包后一般使用什么部署,vue打包后一般使用什么部署,vue 打包后,内容如对您有帮助,希望把文章链接给更多的朋友!

        用vue-cli构建的项目通常是采用前后端分离的开发模式,也就是前端与后台完全分离,此时就需要将后台接口地址打包进项目中,但是,难道我们只是改个接口地址也要重新打包吗?当然不行了,那就太麻烦了,怎么解决呢?本文推荐俩种方式。

方式1:通过创建js文件进行实现

 优点:简单易懂,方便上手

缺点:配置文件容易被抓取【其实也不必太过于担心】

1. 在public文件夹下创建webconfig.js文件

window.webConfig = { "webApiBaseUrl": "http://api.xxxx.com/api", "webSystemTitle":"后台管理系统"}

2.在index.html页面应用js文件 

vue打包之后,可以进行修改配置后端地址、端口等信息方法(vue打包注意事项)

3.应用完成之后,就可以在任何地方使用window.webConfig

4.接口地址变化后直接修改dist/config.json文件即可,无需重新打包vue工程

方式二: 通过创建json文件,配合使用axios来实现

1.同样在public文件夹下创建webconfig.json文件

{ "webApiBaseUrl": "http://api.xxxx.com/api", "webSystemTitle":"后台管理系统"}

2.在base.js文件中读取【主要是放在axios请求处,因为是把后端接口域名提取出来了,所以当道了base.js文件】

/** * 接口域名的管理 */import axios from 'axios'const base = { web: getWebApiBaseUrl(), signalRApiHost: process.env.VUE_APP_SignalR_APIHOST,}function getWebApiBaseUrl(){ let WebApiBaseUrl = process.env.VUE_APP_BASE_APIHOST axios.get('../webconfig.json').then(res => { // 请求上面描述的本地配置文件 // 当env=prod 时请求地址为生产环境 const node_env = process.env.NODE_ENV if(node_env == 'production'){ WebApiBaseUrl = res.data.webApiBaseUrl }else{ WebApiBaseUrl = process.env.VUE_APP_BASE_APIHOST } }) return WebApiBaseUrl // Vue.prototype.WebApiBaseUrl;}export default base

3.步骤2主要是解释如何通过axios发起get请求,读取json配置文件,具体写在哪个地方,要根据自己的实际情况而定

注意:config.json的路径,路径中没有public! 路径中没有public! 路径中没有public!

开发的过程中其实不太理解这是为什么,但从npm run build编译后生成的dist/ 才能更好的理解为什么会这样。如下图,打包后的vue工程,config.json是在根目录下的,没有public目录。

接口地址变化后直接修改dist/config.json文件即可,无需重新打包vue工程

结束语:以上俩种方式,均可以实现vue工程打包之后修改后端接口以及其他配置的诉求,结合实际情况运用,个人推荐使用方式1,使用起来,一个字,真香....

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

上一篇:由哈勃太空望远镜拍摄的大麦哲伦星云 (© ESA/Hubble/NASA)(哈勃太空望远镜取得的部分成果有哪些)

下一篇:Uni-app实现推送Uni-push(Android)(uniapp 信息推送)

  • 新企业所得税季初资产总额
  • 金税四期正式启动
  • 会计报表编制有哪些标准
  • 小规模30万免税是含税还是不含税
  • 独立核算的优点
  • 建筑挂靠企业账务处理
  • 利润分配包括缴纳所得税吗
  • 进口汽车消费税的计算公式
  • 哪些银行承兑汇票不能收的名单
  • 可转换公司债券权益成分和负债成分
  • 营改增租金收入税率
  • 资本公积提取比例怎么算
  • 原材料投资入股协议约定价值公允价值
  • 土地转让增值税计税依据
  • 所得税逾期未申报怎么处理
  • 转让法人要注意什么
  • 小规模怎样计算进项税额
  • 出租房屋房产税怎么算
  • 勾选认证和扫描认证哪个好
  • 餐饮发票忘记作废也没冲红怎么处理?
  • 出口退税企业的税负率怎么算?
  • 所得税申报表中的营业成本包括费用吗
  • 个税本期收入是应发还是实发
  • 自建房房产税计税依据及计算方式
  • 怎么关闭iphone手机
  • 微软系统管理员账号
  • 初级会计一共考几门课程
  • 企业雇佣临时工的工资属于工资薪金支出么
  • 非正常损失会计利润调整
  • 我想看阿尔伯塔
  • php的strcmp
  • 中小企业应交税费
  • 论文笔记模板
  • 铡刀演示
  • 有趣的html简单代码
  • 大数据投资发展有限公司
  • 营改增前取得的有形动产为标的物
  • java泛型方法的作用
  • 代理记账公司工作经历
  • 一般纳税人不得从销项税额中抵扣的进项税额有哪些?
  • mysql基本语法
  • 织梦建站详细步骤
  • antd pro v5
  • 自收自支编制和全额拨款编制
  • 记账凭证去根据什么填制
  • 应税销售行为有哪些
  • sqlserver2005使用教程
  • 调整以前年度少计收入
  • 医保指的是啥
  • 已开普通发票记账联丢失怎么办?
  • 分包工程 税务 账务处理
  • 营业账簿如何缴纳税款
  • csv数据量太大怎么拆分
  • sql server 1222解决
  • ubuntu20.04怎么安装
  • server2008 无法启动
  • windows server 2008的技巧:防止ping的方法
  • win8系统的电脑
  • 如何手动添加开机密码
  • ubuntu系统如何
  • windows7开机
  • winio在win7下使用
  • win10的outlook在哪
  • cortana小娜怎么用
  • win8如何进行系统还原
  • Cocos2dx------从json文件读取数据
  • 日亚海淘官网
  • jquery邮箱正则表达式
  • shell根据时间获取文件
  • ajax成功不走success
  • ubuntu on android
  • 详解各种汽油一吨等于多少升
  • android 标签页
  • javascript数据类型有哪些
  • 增值税红字发票怎么做账
  • 税务财务负责人承担什么责任
  • 陕西税务厅
  • 土地出让金契税计税依据
  • 环保税申报操作手册
  • 烟叶税是谁交
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设