位置: IT常识 - 正文

vue项目根据不同环境动态配置接口请求ip及全局变量(vue环境变量配置)(vue调用同一个组件)

编辑:rootadmin
vue项目根据不同环境动态配置接口请求ip及全局变量(vue环境变量配置)

推荐整理分享vue项目根据不同环境动态配置接口请求ip及全局变量(vue环境变量配置)(vue调用同一个组件),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:vue项目根据不同环境切换登录不同系统,vue根据不同用户跳转到不同页面,vue多个项目,vue项目根据不同环境切换登录不同系统,vue根据不同条件import,vue根据不同用户跳转到不同页面,vue项目根据不同环境切换登录不同系统,vue根据不同用户跳转到不同页面,内容如对您有帮助,希望把文章链接给更多的朋友!

在项目的开发过程中,我们常常会遇到根据不同的环境需要切换不同的ip的问题,例如在项目部署到测试服时需要将接口请求ip替换成测试服的ip,部署到正式服时又需要将接口请求ip替换成正式服对应的ip,有些公司还有预发环境等,这样在每次部署不同环境的项目前都需要先手动切换ip,这样既繁琐又易出错。本篇文章就记录了本人在解决这一问题的详细步骤。

配置步骤1.在项目的根目录下新建 .env.xxx 文件

vue脚手架创建的项目默认目录结构如下:

根据环境个数在根目录下新增 .env.xxx 文件

 如上,三个 .env.xxx 文件后缀名(文件后缀名可自定义)为development、production、test,可分别对应为开发环境、生产环境和测试环境。如果还需要预发环境,则还可继续新增一个 .env.pre 文件代表预发环境。

每个环境都会加载的变量

如果还需要设置每个环境都需要加载的变量,则可以添加 .env 文件,如果没有,则可以不建此文件。(即每个环境对应变量的变量值都是一样的时候,则可以将变量定义在公用的.env文件中,而对应每个环境的 .env.xxx文件中则不需要再重复定义此变量)

2.在对应环境的 .env.xxx 文件中添加变量

在.env.xxx 文件中只有 NODE_ENV,BASE_URL 和以 VUE_APP_ 开头的变量会通过 webpack.DefinePlugin 静态地嵌入到客户端侧的代码中。

NODE_ENV : 主要用于标识当前的环境BASE_URL: vue.config.js 中的 publicPath 选项相符,即你的应用会部署到的基础路径VUE_APP_* : 自定义变量vue项目根据不同环境动态配置接口请求ip及全局变量(vue环境变量配置)(vue调用同一个组件)

.env.development(开发环境) 文件代码

.env.production(生产环境) 文件代码

.env.test(测试环境) 文件代码

.env(所有环境都会加载的变量) 文件代码

3.package.json 文件配置对应环境打包命令

vue脚手架创建的项目默认配置如下:

vue-cli-service serve:配置默认是使用的development对应环境的环境变量(当然也可以自己手动指定对应的环境,在现有命令后面加上 --mode development即可,完整命令:vue-cli-service serve --mode development), 也就是说执行npm run serve,会将.env.development文件和.env文件里面的变量加入项目代码中vue-cli-service build:配置默认是使用的production对应环境的环境变量, 也就是说执行npm run build,会将.env.production文件和.env文件里面的变量加入项目代码中

添加测试服打包命令(运行命令:npm run build:test)

在package.json文件中的 scripts 对象中添加如下代码:

 vue-cli-service build --mode test :命令中的test对应的是 .env.xxx文件中设置NODE_ENV变量的值,如果没有设置NODE_ENV变量,则默认以 .env.xxx 文件的后缀名为准,如果也找不到.env.test文件,则打包报错,

如果想在本地直接使用测试服的环境变量也可以在package.json 中再配置项目启动命令,配置如下(运行命令:npm run serve:test):

 或者直接修改现有serve 的运行模式: 

配置完成后如何在项目中使用在请求js文件中,可用于替换请求接口的ip,达到根据不同的环境请求不同的ip的效果在vue文件中,可当作全局变量使用,类似于在vue中定义的全局常量在vue.config.js文件中使用,可用于判断当前的打包环境,根据不同的环境进行一些打包优化配置vue-cli的index.html中使用,可用于加载公司统一定义的一些js、css等头部文件(需根据各个环境引入各自的js和css)1.请求接口的js文件/vue页面中使用 语法:process.env.变量名称

2.vue.config.js中根据环境变量判断打包环境,进行打包优化配置:

3.在vue-cli的index.html中使用

语法:<%= 变量名 %> html中根据不同环境,加载不同css/js文件

//css文件<link rel="stylesheet" href="<%= VUE_APP_API %>/header/head.css" rel="external nofollow" >//js文件<script type="text/javascript" src="<%= VUE_APP_API %>/footer.js"></script>

html中根据不同环境,加载不同本地js代码

<% if (process.env.NODE_ENV === 'production' ) { %> <script> window.test = 'xxxx' </script><% } %>

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

上一篇:Bert 得到中文词向量(bert获取中文词向量)

下一篇:利用Matlab进行图像分割和边缘检测(利用matlab作图)

  • 超温馨动人的11段励志小故事(超温馨动人的110字作文)

    超温馨动人的11段励志小故事(超温馨动人的110字作文)

  • qq群怎么关闭匿名功能(qq群如何关闭匿名)

    qq群怎么关闭匿名功能(qq群如何关闭匿名)

  • vivo NEX 3s搭载的是哪个系统(vivo nex3s值得入手吗)

    vivo NEX 3s搭载的是哪个系统(vivo nex3s值得入手吗)

  • 爱奇艺收藏在哪里(爱奇艺收藏占内存吗)

    爱奇艺收藏在哪里(爱奇艺收藏占内存吗)

  • 快手保证金每个月都交吗(快手保证金505元)

    快手保证金每个月都交吗(快手保证金505元)

  • 微信删除拉黑对方列表里还有你吗(微信删除拉黑对方后,对方申请好友)

    微信删除拉黑对方列表里还有你吗(微信删除拉黑对方后,对方申请好友)

  • 手机wps怎么转成pdf格式(手机wps怎么转成文档发送)

    手机wps怎么转成pdf格式(手机wps怎么转成文档发送)

  • 苹果蓝牙怎么接电话(苹果蓝牙怎么接微信电话)

    苹果蓝牙怎么接电话(苹果蓝牙怎么接微信电话)

  • 接线盒怎么接线(接线盒怎么接线图)

    接线盒怎么接线(接线盒怎么接线图)

  • 手机号打不通是怎么回事(手机号打不通为啥)

    手机号打不通是怎么回事(手机号打不通为啥)

  • 佳能相机黑屏怎么恢复(佳能相机黑屏怎么解决)

    佳能相机黑屏怎么恢复(佳能相机黑屏怎么解决)

  • 笔记本保修期内维修要钱吗(笔记本保修期内屏幕坏了需要收费吗)

    笔记本保修期内维修要钱吗(笔记本保修期内屏幕坏了需要收费吗)

  • 屏蔽此人是什么意思(屏蔽此人是什么意思呀)

    屏蔽此人是什么意思(屏蔽此人是什么意思呀)

  • 退款中卖家还继续发货(退款中卖家还继续发货,我能收吗)

    退款中卖家还继续发货(退款中卖家还继续发货,我能收吗)

  • 手机信号灯怎么设置(手机信号指示灯)

    手机信号灯怎么设置(手机信号指示灯)

  • 手机qq怎么充vip(手机QQ怎么充值)

    手机qq怎么充vip(手机QQ怎么充值)

  • 淘宝需要绑定身份证吗(淘宝要绑定身份证吗)

    淘宝需要绑定身份证吗(淘宝要绑定身份证吗)

  • 淘宝的问大家怎么弄(淘宝的问大家怎么找)

    淘宝的问大家怎么弄(淘宝的问大家怎么找)

  • oppor17支持投屏吗(oppor17能投屏吗?)

    oppor17支持投屏吗(oppor17能投屏吗?)

  • 拼多多会员名怎么看(拼多多会员名怎么修改)

    拼多多会员名怎么看(拼多多会员名怎么修改)

  • 苹果手机的云相册在哪(苹果手机的云相册怎么能看到照片)

    苹果手机的云相册在哪(苹果手机的云相册怎么能看到照片)

  • 黑鲨2pro支持无线快充吗(黑鲨手机2pro支持无线充电吗)

    黑鲨2pro支持无线快充吗(黑鲨手机2pro支持无线充电吗)

  • 腾讯视频app音画不同步(腾讯视频点击切换最强音画)

    腾讯视频app音画不同步(腾讯视频点击切换最强音画)

  • 小米8边充电边用耳机(小米边充电边玩会爆炸吗)

    小米8边充电边用耳机(小米边充电边玩会爆炸吗)

  • 打电话一直嘟嘟嘟(打电话没人接也不提示为啥只是嘟嘟响)

    打电话一直嘟嘟嘟(打电话没人接也不提示为啥只是嘟嘟响)

  • opencv训练自己的模型,实现特定物体的识别(opencv训练模型教程)

    opencv训练自己的模型,实现特定物体的识别(opencv训练模型教程)

  • 解决echarts报错Cannot read properties of null (reading ‘getAttribute‘)(echarts遇到的坑)

    解决echarts报错Cannot read properties of null (reading ‘getAttribute‘)(echarts遇到的坑)

  • 销项税大于进项税时怎么处理
  • 税务做定额
  • 法人买社保不领钱可以吗
  • 递延所得税资产是什么类科目
  • 银行回单可以跨年补录吗
  • 个税申报了还要扣钱吗
  • 申请100万增值税发票资格
  • 一个月作废发票多会有影响吗?
  • 售后回租涉税
  • 即征即退免所得税吗
  • 利息收入汇算清缴
  • 代收水电费做错了该如何调账?
  • 差错更正要调去年的吗
  • 公会经费开具的法律依据
  • 第三方投资入股
  • 哪些费用可以税后扣除
  • 投资收益是否缴纳印花税
  • 固定资产折旧计提完毕怎么处理
  • 维修开票单位写什么
  • 年度中间符合小数怎么算
  • 内外账合并步骤
  • 增值税谁来付
  • 组织员工出游注意事项
  • wps的广告怎么关掉
  • 贴现到期不获付款
  • 以房抵工程款会计分录
  • 被税务查了
  • 出口退税申请流程
  • 基本户是否可以冻结
  • 包装物如何做会计分录
  • kb4580419更新
  • 公司和个人分别交什么税
  • php echo \n
  • 债转股适用范围
  • 固定资产的主要特征有哪些
  • fedora23安装
  • 油气勘探支出包括
  • laravel insert ignore
  • 新建厂房费用应计入什么
  • 红字发票步骤
  • 皮丘拉湖畔的乌代布尔城市宫殿,印度 (© Chaiyun Damkaew/Getty Images)
  • 销售货物的收入总额包括什么
  • 资产负债表中的应收账款应根据什么填列
  • html基础网页
  • vue设置元素不可点击
  • 申报表中的免税销售额是收入吗
  • 国有资产划转实施方案
  • 车辆转让后的责任谁承担
  • phpcms 标签
  • 织梦cms不更新了吗
  • python字符串如何换行
  • 销售熟食卤制品怎么做
  • 过渡期怎么坚持下去
  • 个体户开票超过多少认定为小规模
  • 纳税人应按照当期可抵扣进项税额的10%
  • 电子承兑汇票兑现扣几个点
  • 小规模减免的增值税
  • 提现手续费属于什么费用
  • 发票红冲重开是退个税吗
  • 预付货款用什么会计科目
  • 年终返利销售政策范本
  • 购买国家机关证件罪量刑标准
  • 滴滴发票抬头是什么意思
  • 仓库做账应该注意些哪些事项
  • SQL Server 2000 清理日志精品图文教程
  • mac电脑拷贝文件在哪里
  • win10无人值守文件使用方法
  • vc软件是什么软件
  • 局域网共享提示无法访问 你没有权限
  • nodejs 视频切片
  • python如何不换行
  • javascript几种类型
  • python如何用
  • 安卓数据网络
  • json转复杂对象
  • 深入理解中国式现代化
  • javascript教程 csdn
  • 国家浙江税务局
  • 资源税的税目有7个,其中不包括
  • 理财持有时间
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设