没有使用 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. 2022/07/16暑期集训考试 day1

    T1 取餐号 看到数据范围 直接锁定埃氏筛和线性筛 我打的是一个优化一点的埃氏筛 #include<bits/stdc++.h> using namespace std; #define ...

  2. JavaScript高级程序设计笔记09 代理与反射

    代理与反射 ES6新增的代理和反射为开发者提供了拦截并向基本操作嵌入额外行为的能力. 具体就是,可以给目标对象定义一个关联的代理对象,而这个代理对象可以作为抽象的目标对象来使用. 在对目标对象的各种操 ...

  3. 大白话说Python+Flask入门(一)

    写在前面 技术这东西就得用,不用就会忘,之前写博客感觉就是给自己记笔记用,还有大部分,估计睡在语雀里都落灰了,哈哈! 在Python领域,我觉得我还是算个小白吧,会写讲不明白,所以我决定想做一件事,先 ...

  4. 双指针:盛最多水的容器(4.18leetcode每日一题)

    给你 n 个非负整数 a1,a2,...,an,每个数代表坐标中的一个点 (i, ai) .在坐标内画 n 条垂直线,垂直线 i 的两个端点分别为 (i, ai) 和 (i, 0).找出其中的两条线, ...

  5. 快速排序(quick_sort)

    快速排序大体分为三个步骤: 1.确定分界点 q[(l+r) >> 1] 或者 q[(l+r+1) >> 1] ,两者得看情况而定,不能用 q[l] 或者 q[r] 了 因为会超 ...

  6. 神经网络入门篇:神经网络的梯度下降(Gradient descent for neural networks)

    神经网络的梯度下降 在这篇博客中,讲的是实现反向传播或者说梯度下降算法的方程组 单隐层神经网络会有\(W^{[1]}\),\(b^{[1]}\),\(W^{[2]}\),\(b^{[2]}\)这些参数 ...

  7. 多维度分析数据的软件,BI软件不就是吗

    BI软件(Business Intelligence Software)是一种用于多维度分析数据的工具,可以帮助企业从海量数据中提取有价值的洞察力,并为决策者和业务用户提供可视化.交互式的报表和仪表盘 ...

  8. [USACO2007OPENS] Fliptile S

    题目描述 FJ 知道,智商高的奶牛产奶量也大,所以他为奶牛们准备了一个翻动瓦片的益智游戏. 在一个 \(M \times N\) 的方阵上(\(1 \leq M,N \leq 15\)),每个格子都有 ...

  9. CodeForces - 764C

    C. Timofey and a tree time limit per test 2 seconds memory limit per test 256 megabytes input standa ...

  10. 神经网络优化篇:为什么正则化有利于预防过拟合呢?(Why regularization reduces overfitting?)

    为什么正则化有利于预防过拟合呢? 通过两个例子来直观体会一下. 左图是高偏差,右图是高方差,中间是Just Right. 现在来看下这个庞大的深度拟合神经网络.知道这张图不够大,深度也不够,但可以想象 ...