如何在基于vue-cli的项目自定义打包环境


Posted in Javascript onNovember 10, 2018

在工作当中,遇到了下面这个问题:

测试环境与生产环境中的用户权限不一样,因此,就需要根据测试环境打一个包,生产环境又打一个包。

可是,如果每次打包都需要更改权限的配置文件的话,会很麻烦,而且,体现不出一个coder该有的逼格。

为了更有逼格地解决这个问题,于是我百度了一番,上天不负有心人,让我找到了解决方案。

在详叙解决方案之前,先简单介绍下解决方案当中使用到的工具:cross-env,webpack.DefinePlugin

cross-env是给process.env当中添加变量的,那process.env又是什么呢?

process是一个控制node.js的进程,它是一个global对象,包含进程相关的一些信息,而process.env则是包含用户环境信息的一个对象,例如下面这样的对象:

{
 TERM: 'xterm-256color',
 SHELL: '/usr/local/bin/bash',
 USER: 'maciej',
 PATH: '~/.bin/:/usr/bin:/bin:/usr/sbin:/sbin:/usr/local/bin',
 PWD: '/Users/maciej',
 EDITOR: 'vim',
 SHLVL: '1',
 HOME: '/Users/maciej',
 LOGNAME: 'maciej',
 _: '/usr/local/bin/node'
}

使用cross-env可以往这个process.env对象当中添加自定义的数据,然后可以在任何node.js的执行环境当中获取,一般是在打包配置当中获取process.env.NODE_ENV来判断是哪种环境,然后再作相应的配置。

官方解释

如何使用cross-env

  1. 安装:npm i cross-env -D
  2. 在npm自定义命令当中使用;
"script":{
  "build:testing":"cross-env NODE_ENV=‘testing' webpack"
}

然后,我们执行npm run build:testing的时候,就好执行以上的命令,cross-env就会在process.env当中添加一个NODE_ENV的属性,属性的值就是‘testing'字符串,注意这里是加了单引号的,因为这样才是一个字符串,如果不加的话,就相当于一个代码片段,还要在获取完之后通过JSON.stringify去转成字符串。

webpack.DefinePlugin又是什么呢?

webpack.DefinePlugin是webpack自带的一个插件,它的作用是在编译的时候生成一些全局变量的,这里说的全局变量指的是客户端的全局变量,相当于挂载在window对象上的变量,我们可以利用它的这个功能在不同的环境(开发,测试,或者生产)当中定义不同的行为。

官方介绍与使用

介绍完两个插件了,是时候说一下两者结合在实际当中如何使用了。

下面将展示如何解决本文开头一开始所提到的根据测试和生产环境配置不同的用户权限的问题。

在config目录下,根据不同的环境创建不同的配置文件

如何在基于vue-cli的项目自定义打包环境

如上图所示,test.env.js是测试环境的配置文件,prod.env.js则是生产环境的配置文件

test.env.js的配置

const merge = require('webpack-merge')
const devEnv = require('./dev.env')

module.exports = merge(devEnv, {
 NODE_ENV: '"testing"'
})

prod.env.js的配置

module.exports = {
  NODE_ENV:"production"
}

分别创建测试与生产的权限配置文件

test.authority.js 测试环境权限

function getAuthority(userAuthority){
  const menus = [];
  switch(userAuthority){
    case 'zhangsan':
      menus = ["a","b","c","d"];  //这里的a,b,c,d相当与路由配置当中页面的name
      break;
      case 'lishi':
        menus = ["a","b","c"];  
        break;
      case 'wangwu':
        menus = ["b","c","d"];  
        break;
      default:
        menus = ["a","b"];
      
  }
  return menus;
}
export default getAuthority;

prod.authority.js 生产环境的配置方法页和上面一样,只不过是menus里的配置不同

使用cross-env配置对应的NODE_ENV

package.json

"scripts":{
  "build:testing": "cross-env NODE_ENV='testing' node build/build.js",
  "build": "cross-env NODE_ENV='production' node build/build.js"
}

npm run build:testing执行的是测试环境的打包,npm run build则是生产环境的打包。

将当前环境的配置添加到客户端全局

build/webpack.prod.conf.js

const env = process.env.NODE_ENV === 'testing' ? require("../config/test.env.js") : require("../config/prod.env.js");

//配置webpack.DefinePlugin将env添加到全局变量当中
plugins:[
new webpack.DefinePlugin({
  "ENV":env
})
]

根据环境信息配置用户权限

要对用户权限进行控制是要先知道当前登录的是哪个用户,因此用户权限配置的操作是在登录页面完成的。

login.vue

//获取环境信息,然后根据环境信息读取对应的权限配置文件
const env = ENV.NODE_ENV === "testing" ? "test" : "prod";

import getAuthority from `${env}.authority.js`;

export default {
  methods:{
    login(){
      axios({...}).then(res => {  //调用登录接口获取当前用户信息
        let userAuthority = getAuthority(res.userName);  //获取当前登录用户的页面权限
        sessionStorage.setItem("authorityPages",JSON.stringify(userAuthority))  //将用户的页面权限保存起来,在生成侧边栏的时候通过v-if指令判断是否渲染
      })
    }
  }
}

来到这里,就能够解决本文一开始所提的问题了,下面总结一下。

总结

  1. 根据不同的环境编写对应的打包环境信息配置文件;
  2. 根据不同环境编写对应用户权限配置文件;
  3. 根据不同环境编写对应的npm打包命令,使用cross-env设置对应的运行时环境;
  4. 在打包配置文件当中根据运行时环境获取对应的环境配置信息,然后使用webpack.DefinePulgin添加到客户端全局变量当中;
  5. 登录页根据全局变量中的环境信息获取对应的用户权限配置文件;
  6. 用户登录之后根据获取的用户权限文件中的方法获取登录用户的权限,并把当前登录用户的权限保存起来以便之后使用。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
一段实时更新的时间代码
Jul 07 Javascript
用JQuery调用Session的实现代码
Oct 29 Javascript
jQuery中调用WebService方法小结
Mar 28 Javascript
js中符号转意问题示例探讨
Aug 19 Javascript
js判断文本框剩余可输入字数的方法
Feb 04 Javascript
jquery中用函数来设置css样式
Dec 22 Javascript
基于jQuery的左滑出现删除按钮的示例
Aug 29 jQuery
使用 Vue 绑定单个或多个 Class 名的实例代码
Jan 08 Javascript
Angular 向组件传递模板的两种方法
Feb 23 Javascript
在vue项目中,使用axios跨域处理
Mar 07 Javascript
微信小程序实现炫酷的弹出式菜单特效
Jan 28 Javascript
关于vue.js中实现方法内某些代码延时执行
Nov 14 Javascript
Vue项目报错:Uncaught SyntaxError: Unexpected token
Nov 10 #Javascript
node+express框架中连接使用mysql(经验总结)
Nov 10 #Javascript
vue axios请求频繁时取消上一次请求的方法
Nov 10 #Javascript
微信小程序实现跑马灯效果
Oct 21 #Javascript
微信小程序使用scroll-view标签实现自动滑动到底部功能的实例代码
Nov 09 #Javascript
vue.js自定义组件directives的实例代码
Nov 09 #Javascript
详解处理Vue单页面应用SEO的另一种思路
Nov 09 #Javascript
You might like
PHP把网页保存为word文件的三种方法
2014/04/01 PHP
ThinkPHP实现二级循环读取的方法
2014/11/03 PHP
thinkphp特殊标签用法概述
2014/11/24 PHP
PHP简单实现合并2个数字键数组值的方法
2017/05/30 PHP
完美解决Thinkphp3.2中插入相同数据的问题
2017/08/01 PHP
ext form 表单提交数据的方法小结
2008/08/08 Javascript
javascript 装载iframe子页面,自适应高度
2009/03/20 Javascript
js与C#进行时间戳转换
2014/11/14 Javascript
使用纯javascript实现放大镜效果
2015/03/18 Javascript
移动端JQ插件hammer使用详解
2015/07/03 Javascript
JavaScript函数内部属性和函数方法实例详解
2016/03/17 Javascript
微信小程序开发之视频播放器 Video 弹幕 弹幕颜色自定义实例
2016/12/08 Javascript
js正则表达式最长匹配(贪婪匹配)和最短匹配(懒惰匹配)用法分析
2016/12/27 Javascript
jQuery的三种bind/One/Live/On事件绑定使用方法
2017/02/23 Javascript
JavaScript 事件流、事件处理程序及事件对象总结
2017/04/01 Javascript
JavaScript输入分钟、秒倒计时技巧总结(附代码)
2017/08/17 Javascript
vue轮播组件实现$children和$parent 附带好用的gif录制工具
2019/09/26 Javascript
Vue 实现监听窗口关闭事件,并在窗口关闭前发送请求
2020/09/01 Javascript
Python 文件管理实例详解
2015/11/10 Python
浅谈python类属性的访问、设置和删除方法
2016/07/25 Python
python+pyqt实现右下角弹出框
2017/10/26 Python
python实现socket+threading处理多连接的方法
2019/07/23 Python
Python银行系统实战源码
2019/10/25 Python
基于CentOS搭建Python Django环境过程解析
2020/08/24 Python
法国综合购物网站:RueDuCommerce
2016/09/12 全球购物
英国PC组件和在线电脑商店:SCAN
2019/04/18 全球购物
PHP两种查询函数array/row的区别
2013/06/03 面试题
临床医学专业个人的自我评价
2013/09/27 职场文书
最新自我评价范文
2013/11/16 职场文书
表彰先进的通报
2014/01/31 职场文书
文员岗位职责范本
2014/03/08 职场文书
大气污染防治方案
2014/05/19 职场文书
作风大整顿心得体会
2014/09/10 职场文书
小学五一劳动节活动总结
2015/02/09 职场文书
毕业生对母校寄语
2015/02/26 职场文书
2016年企业先进员工事迹材料
2016/02/25 职场文书