Vue全局环境切换时，如何避免频繁出现兼容性问题？

本文共计386个文字，预计阅读时间需要2分钟。

前端开发经常遇到切换环境的情况，包括测试环境、开发环境、正式环境（以及图片环境等）。1. 我们在utils中创建一个global.js文件，用于定义全局常量对象：javascript/** * @Author: faith * @Description: 全局常量对象 * @create: 2019-10-23 * @return: 全局常量 */const global={ // ...全局常量};

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

测试环境，开发环境，正式环境（以及图片环境~~）

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

/** @Author: faith 全局常量对象 create by faith 2019-10-23 @return 全局常量对象 * export function global() { const localGlobal = { PORTAL: 'test.域名.com:1024', // 前台 CONSOLE: 'test.域名.com:9528', // 后台 SHOP: 'test.域名.com:1025', // 店铺 OSS_URL: 'devsfile.oss-cn-beijing.aliyuncs.com/' // 图片地址 } const devGlobal = { PORTAL: 'dev.域名.com', // 前台 CONSOLE: 'dev.console.域名.com', // 后台 SHOP: 'dev.shop.域名.com', // 店铺 OSS_URL: 'devsfile.oss-cn-beijing.aliyuncs.com/' // 图片地址 } const prodGlobal = { PORTAL: 'www.域名.com', // 前台 CONSOLE: 'console.域名.com', // 后台 SHOP: 'shop.域名.com', // 店铺 OSS_URL: '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 全局环境切换问题，希望对大家有所帮助！