Vue 多环境配置
没有使用 package.json 进行配置 ,改配置时不需要重新打包 Vue 多环境配置 package.json
settings.js
window.environment="dev"
window.version = 'v1.0.1' window.settings.dev = {
environment: '开发',
apiUrl: 'http://localhost:9091'
} window.settings.test = {
environment: '测试',
apiUrl: 'http://192.168.0.100:9091'
} window.settings.pre = {
environment: '预发布',
apiUrl: 'http://192.168.0.101:9091'
} window.settings.pro = {
environment: '正式',
apiUrl: 'http://192.168.0.102:9091'
}
config/index.js
let _settings = '';
if (window.environment == 'dev') {
_settings = window.settings.dev
} else if (window.environment == 'test') {
_settings = window.settings.test
} else if (window.environment == 'pre') {
_settings = window.settings.pre
} else if (window.environment == 'pro') {
_settings = window.settings.pro
} else {
_settings = window.settings.dev
} export default {
env: _settings,
}
vue
<div>{{config.env.environment}}</p>
<script>
import config from '@/config'
export default {
components: { },
data(){
return {
config:config
}
}
}
</script>
<style> </style>
main.js
/**
* @description 全局注册应用配置
*/
Vue.prototype.$config = config ---------
<div>{{$config.env.environment}}</p>
Vue 多环境配置的更多相关文章
- 【前端】vue.js环境配置以及实例运行简明教程
vue.js环境配置以及实例运行简明教程 声明:本文档编写参考如下两篇博客,是对它们的修改与补充,欢迎点击链接查看原文: 原文1:vue.js在windows本地下搭建环境和创建项目 原文2:Vue. ...
- Vue多环境配置
Vue多环境配置 大家都知道,使用vue-cli脚手架生成的Vue项目只有开发环境和生产环境,然而在实际开发中,用到的不止这些环境,还包括测试环境,准生产环境等等.所以需要自己添加没有的环境. 以测试 ...
- Vue 不同环境配置相应的 API 地址
我使用的是 Vue + ElementUI 进行构建的项目,在开发过程中,使用的是前后端分离的模式,所以经常会出现多环境配置信息,尤其是 Api 接口地址的配置,如果在代码中使用判断的方式,感觉不友好 ...
- weex和vue开发环境配置详解(配置系统变量等等)
本文详细讲解如何搭建weex和vue开发环境 安装java 现在java安装包,网上的安装包都是国外的,很难下载下来 就用这个链接下载,亲测无毒,http://www.wmzhe.com/soft-3 ...
- vue开发环境配置跨域,一步到位
本文要实现的是:使用vue-cli搭建的项目在开发时配置跨域,上线后不做任何任何修改,接口也可以访问,前端跨域解决方案 production:产品 生产环境 development:开发 开发环境 1 ...
- VUE开发--环境配置(一)(转)
无剑_君关注 0.312019.05.09 11:53:43字数 1,073阅读 19,627 https://www.jianshu.com/p/a494417def99?utm_so ...
- vue开发环境配置
一.开发工具 Visual Studio Code 二.环境搭建 vue推荐开发环境: Node.js: javascript运行环境(runtime),不同系统直接运行各种编程语言 npm: Nod ...
- Vue.js环境配置
一.安装node.js 自行下载安装 https://nodejs.org/en/ 二.查看版本,更新版本 查看node版本 node --version 查看npm版本 npm --version ...
- vue的环境配置
在vue越来越火的情况下,本人也开始加入到大军当中. 首先,列举下我们需要的东西: node.js 环境(npm包管理器) vue-cli 脚手架构建工具 cnpm npm的淘宝镜像 安装node.j ...
- vue:不同环境配置不同打包命令
修改prod.env.js 'use strict'const target = process.env.npm_lifecycle_event;if (target == 'build') { // ...
随机推荐
- 【日常收支账本】【Day01】用PySide6开发一个记账的小软件——初步构思
软件环境 Python 3.10 超详细Python安装教程 PyCharm Community Edition 2023.2.1 PySide6 6.5.1.1 需求分析 1. 基本要素 个人钱款一 ...
- 《最新出炉》系列初窥篇-Python+Playwright自动化测试-25-处理单选和多选按钮-中篇
1.简介 上一篇中宏哥讲解和介绍的单选框有点多,而且由于时间的关系,宏哥决定今天讲解和分享复选框的相关知识. 2.什么是单选框.复选框? 单选按钮一般叫raido button,就像我们在电子版的单选 ...
- Keil MDK忽略警告, 包括文件末尾空白行, 未使用等警告
首先应该了解为什么Keil MDK 会有这样的警告, 原因简单说就是C99规定了要在末尾行加回车 一. 你可以使用格式化工具对所有源文件进行一次格式化处理. 二. 在Keil MDK中查看 Build ...
- Python 潮流周刊#26:requests3 的现状
你好,我是猫哥.这里每周分享优质的 Python.AI 及通用技术内容,大部分为英文.本周刊开源,欢迎投稿.另有电报频道作为副刊,补充发布更加丰富的资讯. 品牌赞助 本周刊由"Python猫 ...
- NEFU OJ Problem1485 贪吃蛇大作战 题解
Problem:F Time Limit:1000ms Memory Limit:65535K 题目 Description 贪吃蛇大家一定都玩过吧,现在宋哥也要玩这个游戏,最初的时候贪吃蛇从屏幕的左 ...
- 🔥🔥Java开发者的Python快速进修指南:函数进阶
在上一篇文章中,我们讲解了函数最基础常见的用法,今天我想在这里简单地谈一下函数的其他用法.尽管这些用法可能不是非常常见,但我认为它们仍然值得介绍.因此,我将单独为它们开设一个章节,并探讨匿名函数和装饰 ...
- Excel中最牛的Index和match函数介绍
当谈到Excel中最强大的函数时,INDEX和MATCH往往会被提及.它们经常一起使用,可以用来查找和返回数据表中的特定数值或信息.下面是对这两个函数的详细介绍: INDEX 函数: INDEX函数的 ...
- IDEA提示Cannot resolve class or package ‘beans‘等类似错误
一.解决方案 1.问题原因: 2.解决: 快捷键:Alt+Enter选择.
- C++学习笔记四:变量与数据类型(布尔型与字符型)
今天来整理一下布尔型和字符型变量的基本使用方法1)布尔型变量1. 声明和初始化一个布尔类型的变量占据1 Byte空间,数值0代表false,其他非0数值代表true bool red_light {f ...
- 27、Type关键字
1.是什么? type是go语法里额重要而且常用的关键字,type绝不只是对应于C/C++中的typeof.搞清楚type的使用,就容易理解Go语言中的核心概念struct.interface.函数等 ...