iview-admin多环境配置打包基础知识入门_iview零基础入门

前言由于目前我在公司已经搭建了Jenkins来进行一键系统发布,同时存在测试和生产两套环境。但是目前iview-admin是不支持的,只好自己进行改造了。PS:iview-admin版本为2.1.0改造方案iview-admin 2.1.0比起iview-admin 2.0.0,移除了config目录且将vue-cli升级到3.0。所以可以使用vue-cli

iview-admin多环境配置打包基础知识入门

前言

由于目前我在公司已经搭建了Jenkins来进行一键系统发布,同时存在测试和生产两套环境。但是目前iview-admin是不支持的,只好自己进行改造了。

iview-admin多环境配置打包基础知识入门_iview零基础入门

PS:iview-admin版本为2.1.0


改造方案

iview-admin 2.1.0比起iview-admin 2.0.0,移除了config目录且将vue-cli升级到3.0。

所以可以使用vue-cli 3.0的环境变量和模式特性来支持多环境配置打包。

在项目根目录添加环境变量文件

PS:development、test和production是NODE_ENV的默认环境变量,所以不能使用。

  1. 新增开发环境文件.env.dev,内容如下:
NODE_ENV = 'dev'
VUE_APP_ENV = 'dev' 
VUE_APP_MOCK = true
BASE_URL= '/'
  1. 新增测试环境文件.env.beta,内容如下:
NODE_ENV = 'production'
VUE_APP_ENV = 'test'
VUE_APP_MOCK = false
BASE_URL= '/test'
  1. 新增生产环境文件.env.prod,内容如下:
NODE_ENV = 'production'
VUE_APP_ENV = 'prod'
VUE_APP_MOCK = false
BASE_URL= '/prod'

环境变量文件中各个属性的用途如下:

  1. NODE_ENV使用的是production的打包配置
  2. VUE_APP_ENV是因为如果要替换src目录下文件中的某个参数则要以VUE_APP_开头,这个参数为对应的环境
  3. VUE_APP_MOCK为是否引入mock.js文件的标识
  4. BASE_URL为前端项目访问时的相对地址

修改package.json

修改scripts的dev和build,修改后内容如下:

    "scripts": {
        "dev": "vue-cli-service serve --open --mode dev",
        "build:test": "vue-cli-service build --mode beta",
        "build:prod": "vue-cli-service build --mode prod",
        "lint": "vue-cli-service lint",
        "test:unit": "vue-cli-service test:unit",
        "test:e2e": "vue-cli-service test:e2e"
    },

修改后的指令

  1. npm run dev为开发调试
  2. npm run build:test为测试环境打包
  3. npm run build:prod为开发环境打包

修改vue.config.js文件

修改BASE_URL(此参数控制的是前端项目访问时的相对地址),改为从环境变量中获取,内容如下:

const BASE_URL = process.env.BASE_URL

修改src/config/index.js文件

修改baseUrl,改为多个后端API接口的配置,内容如下:

  baseUrl: {
    dev: 'http://localhost:8081',
    test: 'http://www.test.com',
    prod: 'http://www.prod.com'
  },

修改src/libs/api.request.js文件

修改baseUrl(对应后端API接口的地址),改为根据环境变量获取对应的URL,内容如下:

    const env = process.env.VUE_APP_ENV
    const baseUrl = config.baseUrl[env]

修改src/main.js文件

修改mock包引入判断,改为从环境变量中获取,内容如下:

if (process.env.VUE_APP_MOCK) require('@/mock')

参考资料

  1. https://cli.vuejs.org/zh/guid…
  2. https://github.com/vuejs/vue-…

来自:https://segmentfault.com/a/1190000018407313

海计划公众号
(0)
上一篇 2020/03/31 01:48
下一篇 2020/03/31 01:48

您可能感兴趣的内容

  • 使用CSS实现无滚动条滚动使用说明_滚动入门攻略

    我们都知道,撸页面的时候当我们的内容超出了我们的div,往往会出现滚动条,影响美观。尤其是当我们在做一些导航菜单的时候。滚动条一出现就破坏了UI效果。 我们不希望出现滚动条,也不希望超出去的内容被放逐,就要保留鼠标滚动的效果。我们都知道overflow:hidden是可以隐藏滚动条的,但存在的问题是:页面或元素失去了滚动的特性,进而溢出内容也变得不可见,这样

    2020/04/03
  • 从 callback 到 promise基础知识_promise基础知识

    Javascript 异步演化史前几天看了一个Javascript 异步演化史,谈到从 callback 到 Promise 再到 Async/Await 的历程,很有趣。大家有兴趣的话可以去看一下原文,或是直接百度搜翻译。我这里默认大家都了解了这段历史,只简单介绍一下 javascript 异步操作里的一个小知识点–promisify。从 callbac

    2020/03/20
  • 浅谈对soket的理解入门基础_soket使用指南

    定义:网络上的两个程序通过一个双向的通信链实现数据的交换,这个链接的一端就成为Socket它是进程通信的一种,即调用这个网络库的api函数实现分布在不同主机相关进程之间的数据交换,依照tcp/ip协议分给每个主机的网络地址,如果两个主机要进行通信,任何一个进程都要首先知道对方的网络地址,也可以说是对方的IP。端口号用来辨别本地进程,一个本地的进程通信时,,都

    2020/04/03
  • 程序员炫富方式基础教程程序员是如何低调炫富的?_程序员基础入门

    近日国家统计局公布了过去一年各个行业的薪资数据,其中,IT行业的从业者,平均年薪达到11万左右。对于程序员来说,很多人的工资水平可能还要高于这个数字,恭喜在做的各位,距离高富帅的目标已经达成了三分之一!但是对于月入五位数的程序员们来说很少见到他们炫富。他们似乎总是有一种把月薪5W过成月薪500的超能力。普通人的炫富是这样,大金链子,大手表,大金牙,钻石王老五

    2020/04/03
  • JS算法题之三数之和入门基础_算法题基础知识教程

    题目描述给定一个包含 n 个整数的数组 nums,判断 nums 中是否存在三个元素 a,b,c ,使得 a + b + c = 0 ?找出所有满足条件且不重复的三元组。注意:答案中不可以包含重复的三元组。例如, 给定数组 nums = [-1, 0, 1, 2, -1, -4],满足要求的三元组集合为:
    [[-1, 0, 1],[-1, -1, 2]
    ]解

    2020/03/29
  • freeiconsweb指南教程免费搜索下载小图标的网站

    freeiconsweb基础入门 官方网址:http://www.freeiconsweb.com/ 简介描述:免费搜索下载小图标的网站 freeiconsweb官网介绍 Down…

    2020/03/05
  • react-sketchapp入门基础知识_为设计系统量身定制的开源库

    react-sketchapp入门基础知识 官方网址:http://airbnb.io/react-sketchapp/ GitHub:https://github.com/air…

    2020/03/06
  • javascript中object是什么?零基础入门_object小白知识

    object是javascript中一个被我们经常使用的数据类型,而且JS中的所有对象都是继承自Object对象的。下面本篇文章就来给大家简单介绍一下javascript中的Object类型,希望对大家有所帮助。Object类型ECMAScript中的对象其实就是一组数据和功能的集合。通过new操作符后跟要创建的对象类型的名称来创建。//创建一个Object

    2020/03/22
  • cash基础知识_现代浏览器(IE10 +)的一种jQuery替代品

    cash基础知识 GitHub:https://github.com/kenwheeler/cash 简介描述:现代浏览器(IE10 +)的一种jQuery替代品 Cash对于浏览…

    2020/03/07
  • php操作mongodb:添删改查小白知识_mongodb小白教程

    1:插入数据例:向默认的test数据库的wj表中插入数据$manager = new MongoDB\Driver\Manager(“mongodb://localhost:27017”); // 插入数据
    $bulk = new MongoDB\Driver\BulkWrite;
    $bulk->insert([‘id’ => 1, ‘name’=>’测试

    2020/03/24
  • vectorlogozone小白常识_精美的知名产品的 SVG 图标

    vectorlogozone小白常识 官方网址:https://www.vectorlogo.zone/ GitHub:https://github.com/VectorLogoZ…

    2020/03/06
  • Js变量的扩展与解构使用说明_变量入门基础教程

    1、发展历史基本概念:ES6 是 ECMAScript6 的一个简称;1996年网景(Netscape)提交给国际标准组织(ECMA)的新语言,希望成为国际标准。第二年发布了Javascript并称为ECMAScript。为什么不叫JavaScript而是ECMAScript呢?有两个原因,一个是因为商标问题,JavaScript是只有网景公司才可以使用的商

    2020/03/29
  • clash.me使用指南_把文字用歌声唱给你听

    clash.me使用指南 官方网址:https://clash.me/ 简介描述:把文字用歌声唱给你听 这是一个很神奇的网站,你只要在里面随意输入几句英文,它就可以用歌声唱给你听。…

    2020/03/10
  • Javascript可以控制css吗?入门基础知识_css小白常识

    JavaScript可以直接控制css。JavaScript中可以直接设置style的属性、改变class、设置cssText、创建引入新的css样式文件等方法来控制css样式。用JS来动态设置CSS样式,常见的有以下几种1. 直接设置style的属性 某些情况用这个设置 !important值无效如果属性有’-‘号,就写成驼峰的形式(如textAlign)

    2020/03/22
  • js实现字符串/base64的编码和解码基础知识_base64入门基础

    Base64是什么?Base64其实是一种简单的置换加密方式,但是BASE64的用处往往并不是为了防止信息泄露,而且为了方便传输,进过BASE64编码后的信息会比原始信息长,大概是4/3倍。base64是一种基于64个可打印字符来表示二进制数据的表示方法。由于2的6次方等于64,所以每6个比特为一个单元,对应某个可打印字符。Base64的作用:Base64常

    2020/04/05