vue根据环境变量打包项目

news2024/11/29 0:55:42

当你的项目分为多个地区的时候,而且每个地区的逻辑稍微有点差异的情况下,不需要每个地区都打包一次,只需要根据环境变量配置一个公共文件即可

1、新建多个环境变量文件

2、新建globelParams.js

//globelParams.js

const taiYuan = {
  NODE_ENV:'taiYuan',
  VUE_APP_THEME:'blue',
  VUE_APP_YZWMAPSHOW:1,
  BASE_URL:'/',
  VUE_APP_URL:'/api',
  VUE_APP_SSE:'http://221.204.12.135:31568/api',
  PATH_SUFFIX:'/',
  VUE_APP_QRCODE:require('@/assets/images/v1/app_download_shanxi.png'),
  VUE_APP_WXQRCODE:'',
  VUE_APP_SYSTEMATICTITILE:'太原市公务用车管理监督平台',
  VUE_APP_RETENTION_TIME:5,
  VUE_APP_RETENTION_DISTANCE:20,
  VUE_APP_WSBOOK:'http://183.201.195.129:6388',
  VUE_APP_WS:'ws://183.201.195.129:6388',
  VUE_APP_LEASE_WS:'ws://183.201.195.129:9002',
  VUE_APP_GPSTRAN:'gps'
}

const yangQuan = {
  NODE_ENV:'yangQuan',
  VUE_APP_THEME:'blue',
  VUE_APP_YZWMAPSHOW:1,
  BASE_URL:'/',
  VUE_APP_URL:'/api',
  VUE_APP_SSE:'http://183.203.192.98:32568/api',
  PATH_SUFFIX:'/',
  VUE_APP_QRCODE:require('@/assets/images/v1/app_download_shanxi.png'),
  VUE_APP_WXQRCODE:'',
  VUE_APP_SYSTEMATICTITILE:'阳泉市公务用车管理监督平台',
  VUE_APP_RETENTION_TIME:5,
  VUE_APP_RETENTION_DISTANCE:20,
  VUE_APP_WSBOOK:'http://183.201.195.129:6388',
  VUE_APP_WS:'ws://183.201.195.129:6388',
  VUE_APP_LEASE_WS:'ws://183.201.195.129:9002',
  VUE_APP_GPSTRAN:'gps'
}

// 甘肃
const dingXi = {
  NODE_ENV :'dingXi',
  VUE_APP_THEME:'blue',
  VUE_APP_YZWMAPSHOW:1,
  BASE_URL:'/',
  VUE_APP_URL:'/api',
  VUE_APP_SSE:'http://123.249.13.206:32575/api',
  PATH_SUFFIX:'/',
  VUE_APP_QRCODE:'',
  VUE_APP_WXQRCODE:'',
  VUE_APP_SYSTEMATICTITILE:'甘肃省级公务用车管理监督平台',
  VUE_APP_RETENTION_TIME:5,
  VUE_APP_RETENTION_DISTANCE:20,
  VUE_APP_WSBOOK:'http://123.249.13.206:32583',
  VUE_APP_WS:'ws://123.249.13.206:32583',
  VUE_APP_LEASE_WS:'',
  VUE_APP_GPSTRAN:'gps'
}

const lanZhou = {
  NODE_ENV :'lanZhou',
  VUE_APP_THEME:'blue',
  VUE_APP_YZWMAPSHOW:1,
  BASE_URL:'/',
  VUE_APP_URL:'/api',
  VUE_APP_SSE:'https://lanzhou.easted.net.cn/api',
  PATH_SUFFIX:'/',
  VUE_APP_QRCODE:require('@/assets/images/v1/app_download_lanzhou.png'),
  VUE_APP_WXQRCODE:require('@/assets/images/v1/wx_download_lanzhou.jpg'),
  VUE_APP_SYSTEMATICTITILE:'兰州市公务用车管理服务平台',
  VUE_APP_RETENTION_TIME:5,
  VUE_APP_RETENTION_DISTANCE:20,
  VUE_APP_WSBOOK:'https://gansugis.easted.net.cn',
  VUE_APP_WS:'wss://gansugis.easted.net.cn',
  VUE_APP_LEASE_WS:'',
  VUE_APP_GPSTRAN:'gps'
}


class GlobelParams{
  static instance = null
  map = {
    '183.201.195.129:32568':shengZhi,
    '211.93.251.14:32568':jinZhong,
    '60.221.62.32:32568':linFen,
    '124.165.218.186:31568':lvLiang,
    '221.204.12.135:31568':taiYuan,
    '183.203.192.98:32568':yangQuan,
    '183.203.88.9:32568':yunCheng,
    '60.220.220.251:32568':changZhi,
    '111.53.37.136:32568':xinZhou,
    // 甘肃
    '123.249.13.206:32575':dingXi,
    'lanzhou.easted.net.cn':lanZhou
  }

  init(){
    const currentCity = this.map[window.location.host] || process.env;
    return currentCity;
  }

  static getInstance(){
    if(!GlobelParams.instance){
      GlobelParams.instance = new GlobelParams().init()
    }

    return GlobelParams.instance
  }
}

export default GlobelParams

3、在axios接口请求时调用

export const request = axios.create({
  baseURL: GlobelParams.getInstance().VUE_APP_URL,
  timeout: 10000,
});

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1172299.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

虚拟机vmware使用桥接方式联网设置

步骤:虚拟机设置----》网络适配器---->桥接模式 这样设置好;只是这样设置是无法联网的 现在进入到虚拟机内部----->电机右上角的”网络连接“(wired connection)(没错就是wired connection 虽然是连接WiFi热点但…

【每日一题】移除链表元素(C语言)

移除链表元素,链接奉上 目录 思路:代码实现:链表题目小技巧: 思路: 在正常情况: 下我们移除链表元素时,需要该位置的前结点与后节点, 在特别情况时: 例如 我们发现&…

模版方法模式-定义算法的框架

在生活中,很多事需要通过几个步骤才能完成。例如找工作,一般都包含投递简历、面试、等待结果等几个步骤。投递简历何等待结果这两个步骤大同小异,最大的区别在于面试这个步骤。 在软件开发中,有时也会遇到类似情况。某个方法的实…

.mkp勒索病毒解密方法|勒索病毒解决|勒索病毒恢复|数据库修复

导言: 随着网络犯罪日益猖狂,勒索病毒已经成为数字时代中的一大威胁。.mkp勒索病毒是其中一种,其已经衍生出了多个不同的变种,其中常见的有.[MyFilewaifu.club].mkp勒索病毒,[hendersoncock.li].mkp勒索病毒,[myersairmail.cc].mk…

炸了!CVPR 2024投稿ID突破18000

点击下方卡片,关注“CVer”公众号 AI/CV重磅干货,第一时间送达 点击进入—>【计算机视觉和Transformer】交流群 扫码加入CVer知识星球,可以最快学习到最新顶会顶刊上的论文idea和CV从入门到精通资料,以及最前沿项目和应用&…

【黑马程序员】Maven 进阶

文章目录 前言一、分模块开发与设计1. 分模块开发意义2. 分模块开发(模块拆分)2.1 创建 Maven 模块2.2 书写模块代码2.3 通过 Maven 指令安装模块到本地仓库(install 指令) 二、依赖管理1. 依赖传递1.1 依赖传递冲突问题 2. 可选依…

RMI初探

接口 import java.rmi.Remote; import java.rmi.RemoteException;public interface IFoo extends Remote {String say(String name) throws RemoteException; }import java.rmi.Remote; import java.rmi.RemoteException;public interface IBar extends Remote {String buy(Str…

【已解决】设置SSH主机:VS Code-正在本地下载 VS Code 服务器

问题描述 很简单,就是我电脑强制重启之后用vscode再去连服务器,发现连不上了 解决办法 如上图,点击重试按钮,下面的这些东西就可以复制粘贴了 ctrf查找commit,这个时候就能找到一串d037ac076cee195194f93ce6fe2bdfe296…

leetcode:387. 字符串中的第一个唯一字符

一、题目 函数原型 int firstUniqChar(char* s) 二、算法 设置一个大小为26的字符数组,位置0 - 25 分别对应字符 a - z 。遍历两次字符串,第一次记录下每个字符出现的次数,第二次检查哪个字符最先遍历到且出现次数为1,返回该字符即…

【CIO人物展】黄淮学院副CIO周鹏:构建数智化平台赋能学校高质量发展

周鹏 本文由黄淮学院副CIO周鹏投递并参与《2023中国数智化转型升级优秀CIO》榜单/奖项评选。丨推荐企业—锐捷网络 大数据产业创新服务媒体 ——聚焦数据 改变商业 黄淮学院是2004年经教育部批准成立的一所省属全日制普通本科高校。学校位于素有“豫州之腹地、天下之最中”之美…

【每日一题】数组中两个数的最大异或值

文章目录 Tag题目来源题目解读解题思路方法一:哈希集合 其他语言python3 写在最后 Tag 【哈希集合】【位运算-异或和】【数组】【2023-11-04】 题目来源 421. 数组中两个数的最大异或值 题目解读 找出数组中两个数的最大异或结果。 解题思路 一看数据量达到了 …

【leetcode】88. 合并两个有序数组(图解)

目录 1. 思路(图解)2. 代码 题目链接:leetcode 88. 合并两个有序数组 题目描述: 1. 思路(图解) 思路一:(不满足题目要求) 1. 创建一个大小为nums1和nums2长度之和的…

做读书笔记时的一个高效小技巧

你好,我是 EarlGrey,一名双语学习者,会一点编程,目前已翻译出版《Python 无师自通》、《Python 并行编程手册》等书籍。 在这里,我会持续和大家分享好书、好工具和高效生活、工作技巧,欢迎大家一起提升认知…

emoji对齐 特殊字符对齐 文本对齐

emoji如何对齐 特殊字符如何对齐 高级文本对齐 问题引出 我们在程序打印输出时,如何我们所输出的字符中包含emoji文本,或者其它特殊的字符文本,则我们的打印对齐效果将出现错位。以下代码复现了这一效果(tips: 马老师…

“第六十天”

SRAM和DRAM: DRAM:动态RAM(随机存期存储器),是使用栅极电容存储信息的; SRAM:静态RAM,是使用双稳态触发器存储信息的。 重点在于DRAM由于要通过电容放电来表示信息,所…

R语言gplots包的颜色索引表--全平台可用

R语言gplots包的颜色索引表–全平台可用

【Liunx系统编程】命令模式3

目录 一,zip/unzip压缩指令 二,tar打包/压缩/解包指令 三,uname获取系统信息指令 四,Liunx下常用且重要的按键和关机指令 五,文件之间的互传 1,Windows与Linux之间的互传 2,Linux系统之间…

初识JVM

1. JVM内存区域划分 jvm在启动的时候,会申请到一整个很大的内存区域。整个一大块区域,不太好用。为了更方便使用,把整个区域隔成了很多区域,每个区域都有不同的作用。 本地方法栈 此处提到的栈和数据结构中的栈不是一个东西&…

STM32F103C8T6第二天:按键点灯轮询法和中断法、RCC、电动车报警器(振动传感器、继电器、喇叭、433M无线接收发射模块)

1. 点亮LED灯详解(307.11) 标号一样的导线在物理上是连接在一起的。 将 PB8 或 PB9 拉低,就可以实现将对应的 LED 灯点亮。常用的GPIO HAL库函数: void HAL_GPIO_Init(GPIO_TypeDef *GPIOx, GPIO_InitTypeDef *GPIO_Init);//I/…

DeepSORT多目标跟踪——算法流程与源码解析

一、目标检测与目标追踪 1. 目标检测 在目标检测任务中,主要目标是识别图像或视频帧中存在的物体的位置和类别信息。这意味着目标检测算法需要定位物体的边界框(Bounding Box)并确定每个边界框内的物体属于哪个类别(如人、汽车、…