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 页面只自动刷新一次
Jul 10 Javascript
jQuery满屏焦点图左右滚动特效代码分享
Sep 07 Javascript
由浅入深剖析Angular表单验证
Jul 14 Javascript
15个非常实用的JavaScript代码片段
Dec 18 Javascript
JavaScript数据结构之二叉树的遍历算法示例
Apr 13 Javascript
浅谈事件冒泡、事件委托、jQuery元素节点操作、滚轮事件与函数节流
Jul 22 jQuery
angular6.0开发教程之如何安装angular6.0框架
Jun 29 Javascript
JavaScript变速动画函数封装添加任意多个属性
Apr 03 Javascript
ES6实现图片切换特效代码
Jan 14 Javascript
vue实现购物车列表
Jun 30 Javascript
Vue实现返回顶部按钮实例代码
Oct 21 Javascript
Vue-Ant Design Vue-普通及自定义校验实例
Oct 24 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
php操作JSON格式数据的实现代码
2011/12/24 PHP
PHP图片裁剪函数(保持图像不变形)
2014/05/04 PHP
PHP输出XML格式数据的方法总结
2017/02/08 PHP
javascript自定义函数参数传递为字符串格式
2014/07/29 Javascript
js与jquery回车提交的方法
2015/02/03 Javascript
JS实现控制表格行内容垂直对齐的方法
2015/03/30 Javascript
jquery实现鼠标点击后展开列表内容的导航栏效果
2015/09/14 Javascript
jquery trigger函数执行两次的解决方法
2016/02/29 Javascript
jQuery+json实现动态创建复杂表格table的方法
2016/10/25 Javascript
javascript鼠标跟随运动3种效果(眼球效果,苹果菜单,方向跟随)
2016/10/27 Javascript
JavaScript实现清空(重置)文件类型INPUT元素值的方法
2016/11/17 Javascript
vuejs 动态添加input框的实例讲解
2018/08/24 Javascript
vue: WebStorm设置快速编译运行的方法
2018/10/18 Javascript
JavaScript中的 new 命令
2019/05/22 Javascript
js实现查询商品案例
2020/07/22 Javascript
Python去掉字符串中空格的方法
2014/03/11 Python
通过Python使用saltstack生成服务器资产清单
2016/03/01 Python
python实现图书管理系统
2018/03/12 Python
python 自动批量打开网页的示例
2019/02/21 Python
tensorflow如何批量读取图片
2019/08/29 Python
python实现两个一维列表合并成一个二维列表
2019/12/02 Python
python 基于opencv去除图片阴影
2021/01/26 Python
英国花园药房: The Garden Pharmacy
2017/12/28 全球购物
Under Armour澳大利亚官网:美国知名的高端功能性运动品牌
2018/02/22 全球购物
介绍一下#error预处理
2015/09/25 面试题
简单的JAVA编程面试题
2013/03/19 面试题
党的群众路线教育实践活动公开承诺书
2014/03/28 职场文书
《富饶的西沙群岛》教学反思
2014/04/09 职场文书
感恩寄语大全
2014/04/11 职场文书
2014班子“三严三实”对照检查材料思想汇报
2014/09/18 职场文书
2014基建处领导班子“四风”对照检查材料思想汇报
2014/10/04 职场文书
党的群众路线教育实践活动专题组织生活会发言材料
2014/10/17 职场文书
保护环境的宣传语
2015/07/13 职场文书
高中班长竞选稿
2015/11/20 职场文书
2017新年晚会开幕词
2016/03/03 职场文书
Java移除无效括号的方法实现
2021/08/07 Java/Android