没有使用 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 多环境配置的更多相关文章

  1. 【前端】vue.js环境配置以及实例运行简明教程

    vue.js环境配置以及实例运行简明教程 声明:本文档编写参考如下两篇博客,是对它们的修改与补充,欢迎点击链接查看原文: 原文1:vue.js在windows本地下搭建环境和创建项目 原文2:Vue. ...

  2. Vue多环境配置

    Vue多环境配置 大家都知道,使用vue-cli脚手架生成的Vue项目只有开发环境和生产环境,然而在实际开发中,用到的不止这些环境,还包括测试环境,准生产环境等等.所以需要自己添加没有的环境. 以测试 ...

  3. Vue 不同环境配置相应的 API 地址

    我使用的是 Vue + ElementUI 进行构建的项目,在开发过程中,使用的是前后端分离的模式,所以经常会出现多环境配置信息,尤其是 Api 接口地址的配置,如果在代码中使用判断的方式,感觉不友好 ...

  4. weex和vue开发环境配置详解(配置系统变量等等)

    本文详细讲解如何搭建weex和vue开发环境 安装java 现在java安装包,网上的安装包都是国外的,很难下载下来 就用这个链接下载,亲测无毒,http://www.wmzhe.com/soft-3 ...

  5. vue开发环境配置跨域,一步到位

    本文要实现的是:使用vue-cli搭建的项目在开发时配置跨域,上线后不做任何任何修改,接口也可以访问,前端跨域解决方案 production:产品 生产环境 development:开发 开发环境 1 ...

  6. VUE开发--环境配置(一)(转)

    无剑_君关注 0.312019.05.09 11:53:43字数 1,073阅读 19,627        https://www.jianshu.com/p/a494417def99?utm_so ...

  7. vue开发环境配置

    一.开发工具 Visual Studio Code 二.环境搭建 vue推荐开发环境: Node.js: javascript运行环境(runtime),不同系统直接运行各种编程语言 npm: Nod ...

  8. Vue.js环境配置

    一.安装node.js 自行下载安装 https://nodejs.org/en/ 二.查看版本,更新版本 查看node版本 node --version 查看npm版本 npm --version ...

  9. vue的环境配置

    在vue越来越火的情况下,本人也开始加入到大军当中. 首先,列举下我们需要的东西: node.js 环境(npm包管理器) vue-cli 脚手架构建工具 cnpm npm的淘宝镜像 安装node.j ...

  10. vue:不同环境配置不同打包命令

    修改prod.env.js 'use strict'const target = process.env.npm_lifecycle_event;if (target == 'build') { // ...

随机推荐

  1. 第1章 .NET起步

    1.1 什么是.NET? .NET 8.0 SDK下载地址:https://dotnet.microsoft.com/zh-cn/download/dotnet/8.0 .NET 是一个免费的跨平台开 ...

  2. 最小生成树(Kruskal Prim)

    最小生成树 (克鲁斯卡尔算法) Kruskal 给定一个n个点m条边的无向图,图中可能存在重边和自环,边权可能为负数. 求最小生成树的树边权重之和,如果最小生成树不存在则输出impossible. 给 ...

  3. Modbus转Profinet--TS-180 网关连接西门子 PLC 和工业称重仪表

    项目 随着科技的高速发展,工业自动化行业对日益多样的称重需求越来越高,上海某公司在国内的一个 工业自动化项目中,监控中心系统需要远程实时采集工业称重仪表测量的各种称重参数.该系统使用的是 西门子 S7 ...

  4. 【javaweb】integer是什么意思?integer和int的区别

    1.数据类型不同:int是基础数据类型,而integer是包装数据类型 2.默认值不同:int的默认值是0,而integer的默认值是null 3.内存中存储的方式不同:int 在内存中直接存储的是数 ...

  5. 【UniApp】-uni-app-修改组件主题和样式

    前言 好,经过上个章节的介绍完毕之后,了解了一下 uni-app-扩展组件 那么了解完了uni-app-扩展组件之后,这篇文章来给大家介绍一下 uni-app-修改组件主题和样式 首先不管三七二十一, ...

  6. VO、DTO、Entity的区别

    只能说从实际用法的一般习惯上进行区分: 1.entity 里的每一个字段,与数据库相对应,注意:entity与对应的实际数据库表的字段 没有强制要求但是一般建议保持一致(包括字段数据类型),当然,从实 ...

  7. [ABC266Ex] Snuke Panic (2D)

    Problem Statement Takahashi is trying to catch many Snuke. There are some pits in a two-dimensional ...

  8. 16级C程序设计竞赛C题

    问题 C: 回文 时间限制: 1 Sec  内存限制: 128 MB提交: 74  解决: 36[提交][状态][讨论版] 题目描述 给定一个字符串,你可以对字符串做任意改动,你可以在任意地方增加一个 ...

  9. 公私两用U盘管理软件:保障企业数据安全

    随着信息技术的不断发展,企业对数据安全的关注程度越来越高.U盘作为一种便携式的移动存储设备,在工作中被广泛使用,但其本身也存在很多安全隐患,会面临数据泄漏和未经授权访问的风险.例如:企业研发部机密文档 ...

  10. STM32CubeMX教程3 GPIO输入 - 按键响应

    1.准备材料 开发板(STM32F407G-DISC1) ST-LINK/V2驱动 STM32CubeMX软件(Version 6.10.0) keil µVision5 IDE(MDK-Arm) 2 ...