vue 全局环境切换问题
(编辑:jimmy 日期: 2024/11/27 浏览:3 次 )
前端开发经常碰到切换环境的情况,
测试环境,开发环境,正式环境(以及图片环境~~)
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="/UploadFiles/2021-04-02/ossUrl+后台传输url">每次打包之前切换环境,是不是既方便又快捷啊
总结
以上所述是小编给大家介绍的vue 全局环境切换问题,希望对大家有所帮助!
下一篇:vue 父组件通过v-model接收子组件的值的代码