iview-admin多环境配置打包

更新日期: 2019-03-06阅读: 5.8k标签: 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 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


链接: https://fly63.com/article/detial/2242

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!