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

2018-11-09 admin

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

测试环境与生产环境中的用户权限不一样,因此,就需要根据测试环境打一个包,生产环境又打一个包。 可是,如果每次打包都需要更改权限的配置文件的话,会很麻烦,而且,体现不出一个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.DefinePluginwebpack自带的一个插件,它的作用是在编译的时候生成一些全局变量的,这里说的全局变量指的是客户端的全局变量,相当于挂载在window对象上的变量,我们可以利用它的这个功能在不同的环境(开发,测试,或者生产)当中定义不同的行为。

    官方介绍与使用

介绍完两个插件了,是时候说一下两者结合在实际当中如何使用了。 下面将展示如何解决本文开头一开始所提到的根据测试和生产环境配置不同的用户权限的问题。

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


图片描述

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

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

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

module.exports = {
    NODE_ENV:"production"
}

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


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

"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
})
]

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

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

//获取环境信息,然后根据环境信息读取对应的权限配置文件
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. 用户登录之后根据获取的用户权限文件中的方法获取登录用户的权限,并把当前登录用户的权限保存起来以便之后使用。

原文链接:https://segmentfault.com/a/1190000016962001

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-44999.html

文章标题:在基于vue-cli的项目自定义打包环境

相关文章
vue+element-ui+slot-scope实现可编辑表格
1.咱开发拿到需求大多数是去网上找成型的组件,找不到再看原生的方法能否实现,大牛除外哈,大牛一般喜欢封装组件框架。 2.可编辑表格在后台管理系统还是比较常用的,因为比较流行框架element,iview都没有这个应用,所以考虑了两种方法,下...
2017-12-25
Vue获取DOM元素样式和样式更改示例
在 vue 中用 document 获取 dom 节点进行节点样式更改的时候有可能会出现 ‘style’ is not definde的错误,这时候可以在 mounted 里用 $refs 来获取样式,并进行更改: <template...
2017-03-13
从2014年的发展来展望JS的未来将会如何
<font face="寰�杞�闆呴粦, Arial, sans-serif ">2014骞达紝杞�浠惰�屼笟鍙戝睍杩呴€燂紝鍚勭�嶈��瑷€灞傚嚭涓嶇┓锛屼互婊¤冻鐢ㄦ埛涓嶆柇鍙樺寲鐨勯渶姹傘€傝繖浜涜��...
2015-11-12
Vue.js组件tab实现选项卡切换
本文实例为大家分享了vue插件tab选项卡的具体代码,供大家参考,具体内容如下 效果图: 代码如下: <!DOCTYPE html> <html lang="en"> <head> ...
2017-03-13
12个你未必知道的CSS小知识
虽然CSS并不是一种很复杂的技术,但就算你是一个使用CSS多年的高手,仍然会有很多CSS用法/属性/属性值你从来没使用过,甚至从来没听说过。 1.CSS的color属性并非只能用于文本显示 对于CSS的color属性,相信所有Web开发人员...
2015-11-12
ajax为什么令人惊异?ajax的优缺点
使用Ajax的最大优点,就是能在不更新整个页面的前提下维护数据。这使得Web应用程序更为迅捷地回应用户动作,并避免了在网络上发送那些没有改变的信息。 Ajax不需要任何浏览器插件,但需要用户允许JavaScript在浏览器上执行。就像DHT...
2015-11-12
HTML5的5个不错的开发工具推荐
HTML5规范终于在今年正式定稿,对于从事多年HTML5开发的人员来说绝对是一个重大新闻。数字天堂董事长,DCloud CEO王安也发表了文章,从开发者和用户两个角度分析了HTML对两个人群的优势。其实,关于HTML5的开发工具,我们以往的...
2015-11-12
JavaScript教程:JS中的原型
Keith Peters 几年前发表的一篇博文,关于学习没有“new”的世界,其中解释了使用原型继承代替构造函数。两者都是纯粹的原型编码。 标准方法(The Standard Way) 一直以来,我们学习的在 JavaScript 里创建对...
2015-11-12
css布局的各种FC简单介绍:BFC,IFC,GFC,FFC
什么是FC? Formatting Context,格式化上下文,指页面中一个渲染区域,拥有一套渲染规则,它决定了其子元素如何定位,以及与其他元素的相互关系和作用。 BFC 什么是BFC Block Formatting Context,块...
2018-05-17
AJAX的浏览器支持
AJAX 的要点是 XMLHttpRequest 对象。 不同的浏览器创建 XMLHttpRequest 对象的方法是有差异的。 IE 浏览器使用 ActiveXObject,而其他的浏览器使用名为 XMLHttpRequest 的 Jav...
2015-11-12
回到顶部