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.ajax 用户登录验证代码
Oct 29 Javascript
javascript简单实现命名空间效果
Mar 06 Javascript
Web表单提交之disabled问题js解决方法
Jan 13 Javascript
jQuery实现的动态伸缩导航菜单实例
May 07 Javascript
微信浏览器内置JavaScript对象WeixinJSBridge使用实例
May 25 Javascript
js调用百度地图及调用百度地图的搜索功能
Sep 07 Javascript
js判断当前页面用什么浏览器打开的方法
Jan 06 Javascript
js省市县三级联动效果实例
Apr 15 Javascript
vue-cli脚手架的安装教程图解
Sep 02 Javascript
JS实现返回上一页并刷新页面的方法分析
Jul 16 Javascript
node.js中 redis 的安装和基本操作示例
Feb 10 Javascript
js仿淘宝放大镜效果
Dec 28 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使用CURL_MULTI实现多线程采集的例子
2014/07/29 PHP
PHP中读取文件的8种方法和代码实例
2014/08/05 PHP
CodeIgniter扩展核心类实例详解
2016/01/20 PHP
PHP编程计算日期间隔天数的方法
2017/04/26 PHP
laravel Model 执行事务的实现
2019/10/10 PHP
PHP程序守护进程化实现方法详解
2020/07/16 PHP
比较详细的关于javascript中void(0)的具体含义解释
2007/08/02 Javascript
仿当当网淘宝网等主流电子商务网站商品分类导航菜单
2013/09/25 Javascript
Javascript获取当前日期的农历日期代码
2014/10/08 Javascript
jQuery实现统计复选框选中数量
2014/11/24 Javascript
Underscore.js常用方法总结
2015/02/28 Javascript
Vuex2.0+Vue2.0构建备忘录应用实践
2016/11/30 Javascript
js 调用百度分享功能
2017/02/27 Javascript
vuejs2.0子组件改变父组件的数据实例
2017/05/10 Javascript
面包屑导航详解
2017/12/07 Javascript
vue中如何动态绑定图片,vue中通过data返回图片路径的方法
2018/02/07 Javascript
深入理解Node module模块
2018/03/26 Javascript
浅谈高大上的微信小程序中渲染html内容—技术分享
2018/10/25 Javascript
代码整洁之道(重构)
2018/10/25 Javascript
vue实现动态表格提交参数动态生成控件的操作
2020/11/09 Javascript
[01:00:14]DOTA2官方TI8总决赛纪录片 真视界True Sight
2019/01/16 DOTA
Python查找函数f(x)=0根的解决方法
2015/05/07 Python
Python 基础之字符串string详解及实例
2017/04/01 Python
Python设计模式之工厂模式简单示例
2018/01/09 Python
virtualenv 指定 python 解释器的版本方法
2018/10/25 Python
Python中浅拷贝copy与深拷贝deepcopy的简单理解
2018/10/26 Python
Django 博客实现简单的全文搜索的示例代码
2020/02/17 Python
TensorFlow2.1.0安装过程中setuptools、wrapt等相关错误指南
2020/04/08 Python
HTML5公共页面提取作为公用代码的方法
2020/06/30 HTML / CSS
Java 中访问数据库的步骤?Statement 和PreparedStatement 之间的区别?
2012/06/05 面试题
煤矿班组长岗位职责
2013/12/29 职场文书
数控机械专业个人的自我评价
2014/01/02 职场文书
雷锋式好少年事迹材料
2014/08/17 职场文书
2015年学习部工作总结范文
2015/03/31 职场文书
http通过StreamingHttpResponse完成连续的数据传输长链接方式
2022/02/12 Python