位置: 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作图)

  • 实收资本的账务处理是怎样的
  • 民办非企业所得税优惠政策
  • 中级报名的报考条件要求
  • 无偿使用厂房用交税吗
  • 接受资不抵债并账会计分录
  • 劳务派遣人员工作单位怎么写
  • 个体工商户经营范围查询
  • 营业成本增加会导致
  • 退运出口货物的报关流程
  • 预付账款转出分录
  • 工程项目立项前包括哪几个过程
  • 税务局开租赁发票
  • 网上申领发票几天能寄送到?
  • 纳税服务一体化综合监督工作情况报告
  • 快递公司税收优惠
  • 物业收租金必须要发票吗
  • 法人股东获得分红的规定
  • 关联方交易的税怎么算
  • 销售购物卡如何开票
  • 提现属于支出吗
  • 法人股东分红如何申报所得税
  • 支付水电费如何记账
  • 收到商品预付款怎么做分录
  • win 11操作系统
  • 三大期间费用属于什么类
  • 车辆购置税会计科目怎么做账
  • 税前扣除税后扣除
  • 如何检查文档
  • php嵌入js
  • php 钩子
  • mac电脑色彩设置
  • mstore.exe - mstore是什么进程 有什么用
  • 罚款应该计入营业所吗
  • 购入股票佣金会减少吗
  • 存货的期末计价方法是遵循哪个信息质量原则
  • 增值税实际税负计算公式
  • 银行存款日记账对方科目写什么
  • php获取ftp文件目录
  • php创建视图
  • 增值税一般纳税人登记管理办法
  • vue基础知识
  • php initialize
  • java的基本
  • 中小企业的资产负债率均值是多少
  • 发票收款人与复核人为空
  • 进项税转出金额是发票上的哪个
  • 现金流量表要填满吗
  • 医院出的收据就是发票吗
  • 年报中的利润表本月数需要填吗
  • 金税盘的服务费
  • 哪些普通发票可以抵扣
  • 收回上年度拨款怎么做账
  • 其他应收款账户管理应遵循
  • 递延所得税资产和负债账务处理
  • 社保局会给失业人员打电话吗
  • 收到去年的普通发票
  • 会计中劳保用品是什么
  • 提取法定盈余公积会计分录
  • 业务招待费的列支范围
  • 限售股上市流通是好还是坏
  • 变卖固定资产怎么交税
  • 支票有效期10天是自然日还是工作日
  • win8.1还原系统
  • win10系统小娜不见了
  • xp能不能升级win10
  • 如何进入win10安装界面
  • linux系统怎么快速查找文件
  • JS实现的base64加密、md5加密及sha1加密详解
  • js定时器的两种方法
  • jquery插件ajaxupload实现文件上传操作
  • jQ处理xml文件和xml字符串的方法(详解)
  • r+python
  • 访问网页显示脚本错误
  • 小规模企业零申报怎么操作
  • 新旧动能转换是我们能否过坎的关键
  • 辽宁地方税务网站官网
  • 华为西安总代理
  • 增值税普票十万怎么开
  • 工业厂房房产税什么时候开始征收
  • 什么情况下要交印花税
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设