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 相关文章推荐
载入jQuery库的最佳方法详细说明及实现代码
Dec 28 Javascript
浅析hasOwnProperty方法的应用
Nov 20 Javascript
浅谈Javascript中Object与Function对象
Sep 26 Javascript
JavaScript函数的调用以及参数传递
Oct 21 Javascript
angular2使用简单介绍
Mar 01 Javascript
Angularjs中ng-repeat的简单实例
Aug 25 Javascript
浅谈Vuex的状态管理(全家桶)
Nov 04 Javascript
node内置调试方法总结
Feb 22 Javascript
Vue.js实现图片的随意拖动方法
Mar 08 Javascript
jQuery 点击获取验证码按钮及倒计时功能
Sep 20 jQuery
微信小程序分包加载代码实现方法详解
Sep 23 Javascript
vue实现导航标题栏随页面滚动渐隐渐显效果
Mar 12 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多态的实现详解
2013/06/09 PHP
php返回json数据函数实例
2014/10/09 PHP
PIGCMS 如何关闭聊天机器人
2015/02/12 PHP
php如何利用pecl安装mongodb扩展详解
2019/01/09 PHP
javascript function、指针及内置对象
2009/02/19 Javascript
解析John Resig Simple JavaScript Inheritance代码
2012/12/03 Javascript
js解析与序列化json数据(二)序列化探讨
2013/02/01 Javascript
javascript屏蔽右键代码
2014/05/15 Javascript
举例说明如何为JavaScript的方法参数设置默认值
2015/11/17 Javascript
多种js图片预加载实现方式分享
2016/02/19 Javascript
JS for循环中i++ 和 ++i的区别介绍
2016/07/20 Javascript
学习vue.js表单控件绑定操作
2016/12/05 Javascript
基于javascript的异步编程实例详解
2017/04/10 Javascript
jquery实现提示语淡入效果
2017/05/05 jQuery
用vue写一个仿简书的轮播图的示例代码
2018/03/13 Javascript
nodejs取得当前执行路径的方法
2018/05/13 NodeJs
详解Vue.js使用Swiper.js在iOS
2018/09/10 Javascript
redux处理异步action解决方案
2020/03/22 Javascript
Electron实现应用打包、自动升级过程解析
2020/07/07 Javascript
Python3中详解fabfile的编写
2018/06/24 Python
使用PIL(Python-Imaging)反转图像的颜色方法
2019/01/24 Python
使用Python FastAPI构建Web服务的实现
2020/06/08 Python
Numpy中np.random.rand()和np.random.randn() 用法和区别详解
2020/10/23 Python
利用HTML5绘制点线面组成的3D图形的示例
2015/05/12 HTML / CSS
canvas绘制图片drawImage使用方法
2020/09/15 HTML / CSS
Harrods美国:英国最大的百货公司
2018/11/04 全球购物
客户代表自我评价范例
2013/09/24 职场文书
商务英语专业求职信范文
2014/01/28 职场文书
年度考核自我鉴定
2014/02/02 职场文书
活动总结结尾怎么写
2014/08/30 职场文书
医德考评自我评价
2014/09/14 职场文书
幼儿园大班个人总结
2015/02/28 职场文书
物流业务员岗位职责
2015/04/03 职场文书
感恩老师主题班会
2015/08/12 职场文书
Python实现简单的猜单词
2021/06/15 Python
Nginx如何限制IP访问只允许特定域名访问
2022/07/23 Servers