首页 > 其他分享 >vue项目打包后,自由修改配置如接口地址等

vue项目打包后,自由修改配置如接口地址等

时间:2023-02-17 11:45:51浏览次数:52  
标签:文件 vue SOCKET URL APP 接口 js VUE 打包

背景描述:

项目打包后,如果想更换接口域名或者项目名称,就需要再次打包。但是这样子操作有点耗费时间。
如果把这些配置写到一个文件中,然后在index.html文件中引入使用,这样子会大大提高工资效率,节省不少时间。
亲测有效~~

操作流程:

1.先在 vue项目中的 public文件夹中新建一个js文件,例如 config.js
//config.js文件
window.gobalUrl = {
//dev环境
VUE_APP_URL: 'xxxx',
VUE_APP_SOCKET_URL: 'xxx'
//qa环境
// VUE_APP_URL: 'xxxx',
// VUE_APP_SOCKET_URL: 'xxxx'
//prod环境
//VUE_APP_URL: 'xxxx',
//VUE_APP_SOCKET_URL:'xxx'
}

2.然后在index.html文件中引入该文件
<script src="./config.js"></script>

3.页面中使用
例如封装的axios文件中
baseUrl:{
apiUrl: window.gobalUrl.VUE_APP_URL,
websocketUrl: window.gobalUrl.VUE_APP_SOCKET_URL
}
这样子就大功告成了~~

注意:

       如需修改接口域名,将项目npm run build打包后,直接打开dist文件,找到config.js文件,然后打开,把对应的环境域名注释打开即可。包上线成功后,刷新浏览器查看验证即可。

 

 

参考链接:

    https://blog.csdn.net/weixin_45943869/article/details/127632921

    https://www.jianshu.com/p/93cdd4f336d9

 

标签:文件,vue,SOCKET,URL,APP,接口,js,VUE,打包
From: https://www.cnblogs.com/sunnyeve/p/17129549.html

相关文章

  • vue+elementUI 实现设置还款日字母弹窗组件
    1、业务背景还款业务,设置每月还款日,选每月几号扣款,不需要29、30、31,因为不是每个月都有这三天的2、预期效果图3、代码实现3.1初始化vue项目地址:https://cn.vuejs.or......
  • vue中的echarts地图
    地图万能模板+地图配置+全国数据+地图重绘0.echarts图表只能在mounted生命周期函数调用,created钩子中页面还没挂载1、样例that.chart0=this.$echarts.init(document......
  • SpringBoot配置与打包基础
    本篇主要记录SpringBoot使用的基础配置SpringBootMaven配置SpringBootmaven依赖关系我们创建springboot项目后,会发现项目的pom文件都会继承自spring-boot-starter-p......
  • vue 面试
    vue是什么是一个用于创建用户界面的开源JavaScript框架,也是一个创建单页应用的Web应用框架.vue特性有数据驱动(MVVM),组件化,指令系统什么是spasinglepageapplicati......
  • 2023前端开发最新面试题收集-Vue2/3篇
    Vue整理1、谈谈MVVM的理解MVC(react):数据流是单向的,View和Model之间通过controller连接通信,用户操作会请求服务器,路由拦截分发请求,调用对应的控制器controller,控制器会......
  • 安装vue脚手架@vue/cli 4.5.13(稳定版)
    若NPM下载过慢,请参考本处改换镜像源:Here首先新建一个vue测试项目,还记得以前自己是用vue-cli2.0的版本去构建的,毕竟里面有默认配置好的webpack配置,但现在很多小伙......
  • VUE&Tomcat服务器
    目录一、Vue介绍1、Vue是什么2、Vue的特点二、Vue.js的安装1、使用Vite创建三、Vue声明式渲染四、DataProperty和方法1、DataProperty2、方法五、Vue模板语法1、插值1)文......
  • vue中小写数字转大写汉字
    numTocoggle(money){//汉字的数字varcnNums=newArray('零','壹','贰','叁','肆','伍','陆','柒','捌','玖');//基本单位varcnIntRadice=ne......
  • Vue中.env|.env.development|.env.production文件说明【转载】
    0.介绍模式是VueCLI项目中一个重要的概念,默认情况下,一个VueCLI项目有三种模式:developemt模式用于vue-cli-serviceservetest模式用于vue-cli-servicetest:unitproduc......
  • vue 实现网页全屏
    screen(){constelement=document.documentElement;if(this.fullscreen){//退出全屏if(!document.exitFullscreen&&document.exitFullscreen){......