完全免费微信小程序_vue 全局环境切换问题

vue 全局环境切换问题       小编在开发使经常会碰到全局切换问题，今天小编给大家带来一篇教程给大家介绍vue 全局环境切换问题，感兴趣的朋友一起看看吧

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

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

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

@Author: faith
全局常量对象
create by faith 
@return 全局常量对象
export function global() {
 const localGlobal = {
 PORTAL: '/ 前台
 CONSOLE: '/ 后台
 SHOP: '/ 店铺
 OSS_URL: '' // 图片地址
 const devGlobal = {
 PORTAL: '/ 前台
 CONSOLE: '/ 后台
 SHOP: '/ 店铺
 OSS_URL: '' // 图片地址
 const prodGlobal = {
 PORTAL: '/ 前台
 CONSOLE: '/ 后台
 SHOP: '/ 店铺
 OSS_URL: '' // 图片地址
 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" 

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

总结

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