由于目前我在公司已经搭建了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的默认环境变量,所以不能使用。
NODE_ENV = 'dev'
VUE_APP_ENV = 'dev'
VUE_APP_MOCK = true
BASE_URL= '/'
NODE_ENV = 'production'
VUE_APP_ENV = 'test'
VUE_APP_MOCK = false
BASE_URL= '/test'
NODE_ENV = 'production'
VUE_APP_ENV = 'prod'
VUE_APP_MOCK = false
BASE_URL= '/prod'
环境变量文件中各个属性的用途如下:
修改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"
},
修改后的指令
修改BASE_URL(此参数控制的是前端项目访问时的相对地址),改为从环境变量中获取,内容如下:
const BASE_URL = process.env.BASE_URL
修改baseUrl,改为多个后端api接口的配置,内容如下:
baseUrl: {
dev: 'http://localhost:8081',
test: 'http://www.test.com',
prod: 'http://www.prod.com'
},
修改baseUrl(对应后端API接口的地址),改为根据环境变量获取对应的URL,内容如下:
const env = process.env.VUE_APP_ENV
const baseUrl = config.baseUrl[env]
修改mock包引入判断,改为从环境变量中获取,内容如下:
if (process.env.VUE_APP_MOCK) require('@/mock')
来自:https://segmentfault.com/a/1190000018407313
最近在弄wepy的时候在想有没有什么ui比较合适一点的wepy的,也是在网上看了好久发现iview还不错。引用简单,上手超快,组件绚丽!当然,这里还介绍下微信官方建议的框架也是和不错的,有需要的可以看看
最近在使用iview框架写项目,遇到了一些路由控制上的问题,解决过程中也有一些心得,故在此记录下来.每个项目在开发时,对于类似tags(标签页)的控制需求都不尽相同
对iView使用过程中一些特殊的地方进行总结,Table导出csv嵌套对象;Table中添加图片;Table中Input等元素操作修改data值;Form表单对数字校验
有时候表格内容会很多,需要横向滚动查看右边的内容,又不想到底部拖动滚动条,如果能直接在内容中拖动就好了,这个时候就可以用 Vue 的自定义指令来实现了。
因为这个subMenu是动态生成的, 他的name我设置为动态生成过程中的index, 所以第一个subMenu的name是0.根据上述设定, 参考官网的说明,使用activeName=0来表示激活的name
内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!