vue 全局环境切换问题

2024-12-02 04:04:27

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

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

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 全局环境切换问题，希望对大家有所帮助！

vue项目使用.env文件配置全局环境变量的方法

关于文件名:必须以如下方式命名,不要乱起名,也无需专门手动控制加载哪个文件 .env 全局默认配置文件,不论什么环境都会加载合并 .env.development 开发环境下的配置文件 .env.production 生产环境下的配置文件关于文件内容: 注意:属性名必须以VUE_APP_开头,比如VUE_APP_XXX .env: .env.development: 关于文件的加载: 根据启动命令vue会自动加载对应的环境,vue是根据文件名进行加载的,所以上面说"不要乱起名,也无需专门控制加
vue 全局环境切换问题

前端开发经常碰到切换环境的情况, 测试环境,开发环境,正式环境(以及图片环境~~) 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
深入浅析vue全局环境变量和模式

我们可以在项目根目录中的下列文件来指定环境变量: .env # 在所有的环境中被载入 .env.local # 在所有的环境中被载入,但会被 git 忽略 .env.[mode] # 只在指定的模式中被载入 .env.[mode].local # 只在指定的模式中被载入,但会被 git 忽略一个环境文件只包含环境变量的"键=值"对,并且必须以VUE_APP开始: FOO=bar //无效 VUE_APP_SE
vue 使用vue-i18n做全局中英文切换的方法

1.vue-i18n安装 npm install vue-i18n --save-dev 2.在main.js文件中引入 import VueI18n from 'vue-i18n'; Vue.use(VueI18n); const i18n = new VueI18n({ locale: localStorage.getItem('language')||'zh', //使用localStorage缓存到本地,当下次使用时可默认当前使用语言 messages: { ' zh': require
vue多环境配置之 .env配置文件详解

目录 Vue之.env环境配置文件前言一..env是什么? 二.说明及用法 1. 文件说明 2. 文件读取 2.1 npm run serve 2.2 npm run build 3. 查看环境变量 4. 使用环境变量总结 Vue之.env环境配置文件 .env文件是运行项目时的环境配置文件.但是在实际开发过程中,有本地环境.测试环境.预生产.生产环境等等,不同环境对应的配置会不一样.因此,需要通过不同的.env文件实现差异化配置.* 前言在vue项目实际开发过程中,有本地环境.测试环境
基于Vue实现页面切换左右滑动效果

基于Vue的页面切换左右滑动效果,具体内容如下 HTML文本页面: <template> <div id="app> <transition :name="direction" mode="out-in">  <router-view class="app-view" wechat-title></router-vi
基于Vue生产环境部署详解

前面的话开发时,Vue 会提供很多警告来帮助解决常见的错误与陷阱.生产时,这些警告语句却没有用,反而会增加载荷量.再次,有些警告检查有小的运行时开销,生产环境模式下是可以避免的.本文将详细介绍Vue生产环境部署生产环境如果用 Vue 完整独立版本 (直接用 <script> 元素引入 Vue),生产时应该用精简版本 (vue.min.js) 如果用 Webpack 或 Browserify 类似的打包工具时,生产状态会在 Vue 源码中由 process.env.NODE_ENV 决定,
使用vue-cli+webpack搭建vue开发环境的方法

在这里我们需要首先下载node,因为我们要用到npm包下载,是基于node的废话不多说,我们直接进入正题下载node,同时需要下载git,以后我们就在git上输入命令来搭建我们的vue环境 git用的是linux命令不要问为什么,能用就行,你说是不是? windows系统,下载完git以后我们再桌面右击鼠标会看到git Bash,点开它,然后就打开了git, git有很多功能,同时git可以往github上push你的文件,github是一个很不错的仓库管理工具哦好,我们直接开始,打开g
解决ios微信下vue项目组件切换并自动播放音频问题

最近在做一个英语答题项目 , 项目需求是通过答题取的成绩 , 答题的题型是分为 , 听音选图 , 看图选词 , 和填空题 . 项目总共分为了3个页面 , 开始页 ,答题页和结束页面 ,答题页关于每种题型 , 我做了相应的组件 , 每次切换题目的时候 ,显示对应的的组件 , 要求听音选图的时候会自动播放音频 . 惯例 , ios下的safari和微信内置浏览器都不支持audio的自动播放 , 通常的解决方案都是通过 document.addEventListener('WeixinJSBridg
vue实现路由切换改变title功能

由于vue项目通常是单页应用,因此在入口文件index.html只有一个title,单页所展示的若干页面只是随着路由的切换而在同一个index.html上不同的渲染而已,因此此时的title属性是不会随着页面的切换而变更的那么想实现路由切换title变换可以通过vue-router的导航守卫来实现,最简单的的目录结构可如下所示 ├── index.html ├── main.js ├── api │ └── ... # 抽取出API请求 ├── common │ └── constants.j
Node.js+Vue脚手架环境搭建的方法步骤

Node.js的下载 node下载地址:https://nodejs.org/zh-cn/download/ 下载后安装即可.新版Node.js自带npm包管理器 # 查看node的版本 node -v # v12.16.1 # 查看npm版本 npm -v #6.13.4 第一个Node.js程序,新建helloworld.js文件,内容如下 console.log("Hello World") console.log("第一个Node.js程序!") 进入终端

vue 全局环境切换问题

相关推荐

随机推荐