vue 全局环境切换问题


Posted in Javascript onOctober 27, 2019

前端开发经常碰到切换环境的情况,

测试环境,开发环境,正式环境(以及图片环境~~)

1.我们在utils中创建一个global.js文件

/**
@Author: faith
全局常量对象
create by faith 2019-10-23
@return 全局常量对象
*
export function global() {
  const localGlobal = {
   PORTAL: 'http://test.域名.com:1024', // 前台
   CONSOLE: 'http://test.域名.com:9528', // 后台
   SHOP: 'http://test.域名.com:1025', // 店铺
   OSS_URL: 'https://devsfile.oss-cn-beijing.aliyuncs.com/' // 图片地址
  }
 const devGlobal = {
  PORTAL: 'https://dev.域名.com', // 前台
  CONSOLE: 'https://dev.console.域名.com', // 后台
  SHOP: 'https://dev.shop.域名.com', // 店铺
  OSS_URL: 'https://devsfile.oss-cn-beijing.aliyuncs.com/' // 图片地址
 }
  const prodGlobal = {
   PORTAL: 'https://www.域名.com', // 前台
   CONSOLE: 'https://console.域名.com', // 后台
   SHOP: 'https://shop.域名.com', // 店铺
   OSS_URL: 'https://ycsfile.oss-cn-beijing.aliyuncs.com/' // 图片地址
  }
 return devGlobal
}

2.main.js中使用

import { global } from './utils/global'
Vue.prototype.$global = global()
3.vue 页面中使用img地址
data() {
 return {
  ossUrl: this.$global.OSS_URL,
 }
},

4.Dom 结构

<img :src="ossUrl+后台传输url" class="avatar">

每次打包之前切换环境,是不是既方便又快捷啊

总结

以上所述是小编给大家介绍的vue 全局环境切换问题,希望对大家有所帮助!

Javascript 相关文章推荐
javascript 装载iframe子页面,自适应高度
Mar 20 Javascript
javascript检测是否联网的实现代码
Sep 28 Javascript
node.js中的fs.fsync方法使用说明
Dec 15 Javascript
AngularJs定制样式插入到ueditor中的问题小结
Aug 01 Javascript
微信小程序 开发经验整理
Feb 15 Javascript
MUI 解决动态列表页图片懒加载再次加载不成功的bug问题
Apr 13 Javascript
详解vue跨组件通信的几种方法
Jun 15 Javascript
angular6 填坑之sdk的方法
Dec 27 Javascript
前端插件之Bootstrap Dual Listbox使用教程
Jul 23 Javascript
在vue中created、mounted等方法使用小结
Jul 21 Javascript
如何使用three.js 制作一个三维的推箱子游戏
Jul 29 Javascript
原生js+canvas实现验证码
Nov 29 Javascript
vue 父组件通过v-model接收子组件的值的代码
Oct 27 #Javascript
解决包含在label标签下的checkbox在ie8及以下版本点击事件无效果兼容的问题
Oct 27 #Javascript
Vue-Cli项目优化操作的实现
Oct 27 #Javascript
layui table 复选框跳页后再回来保持原来选中的状态示例
Oct 26 #Javascript
Layui 解决表格异步调用后台分页的问题
Oct 26 #Javascript
Layui实现数据表格默认全部显示(不要分页)
Oct 26 #Javascript
vue-router的钩子函数用法实例分析
Oct 26 #Javascript
You might like
11个PHPer必须要了解的编程规范
2014/09/22 PHP
php计算一个文件大小的方法
2015/03/30 PHP
PHP手机号码及邮箱正则表达式实例解析
2020/07/11 PHP
基于php+MySql实现学生信息管理系统实例
2020/08/04 PHP
Some tips of wmi scripting in jscript (1)
2007/04/03 Javascript
functional继承模式 摘自javascript:the good parts
2011/06/20 Javascript
jQuery如何实现点击页面获得当前点击元素的id或其他信息
2014/01/09 Javascript
JavaScript获取鼠标移动时的坐标(兼容IE8、chome谷歌、Firefox)
2014/09/13 Javascript
比例尺、缩略图、平移缩放之百度地图添加控件方法
2015/08/03 Javascript
javascript原生ajax写法分享
2016/04/10 Javascript
jQuery弹出窗口打开链接的实现代码
2016/12/24 Javascript
JavaScript中严格判断NaN的方法
2018/02/16 Javascript
为vue-router懒加载时下载js的过程中添加loading提示避免无响应问题
2018/04/03 Javascript
Node.js使用cookie保持登录的方法
2018/05/11 Javascript
JS实现仿微信支付弹窗功能
2018/06/25 Javascript
nodejs中express入门和基础知识点学习
2018/09/13 NodeJs
用Object.prototype.toString.call(obj)检测对象类型原因分析
2018/10/11 Javascript
Element-UI踩坑之Pagination组件的使用
2018/10/29 Javascript
d3.js实现图形拖拽
2019/12/19 Javascript
解决vue页面渲染但dom没渲染的操作
2020/07/27 Javascript
[03:46]DOTA2英雄基础教程 维萨吉
2013/12/11 DOTA
Python实现短网址ShortUrl的Hash运算实例讲解
2015/08/10 Python
实践Python的爬虫框架Scrapy来抓取豆瓣电影TOP250
2016/01/20 Python
python中Apriori算法实现讲解
2017/12/10 Python
30秒轻松实现TensorFlow物体检测
2018/03/14 Python
Python将8位的图片转为24位的图片实现方法
2018/10/24 Python
python虚拟环境完美部署教程
2019/08/06 Python
Pytorch 定义MyDatasets实现多通道分别输入不同数据方式
2020/01/15 Python
亚瑟士美国官网:ASICS美国
2017/02/01 全球购物
爱淘宝:淘宝网购物分享平台
2017/04/28 全球购物
英国的潮牌鞋履服饰商店:size?
2019/03/26 全球购物
千禧酒店及度假村官方网站:Millennium Hotels and Resorts
2019/05/10 全球购物
泰国Robinson百货官网:购买知名品牌的商品
2020/02/08 全球购物
工程质量月活动方案
2014/02/19 职场文书
保管员岗位职责
2015/02/14 职场文书
关于springboot 配置date字段返回时间戳的问题
2021/07/25 Java/Android