如何在基于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 相关文章推荐
jquery(live)中File input的change方法只起一次作用的解决办法
Oct 21 Javascript
javascript自动改变文字大小和颜色的效果的小例子
Aug 02 Javascript
利用js判断浏览器类型(是否为IE,Firefox,Opera浏览器)
Nov 22 Javascript
jQuery实现的简单提示信息插件
Dec 08 Javascript
js判断一个字符串是以某个字符串开头的简单实例
Dec 27 Javascript
JS作用域深度解析
Dec 29 Javascript
基于Angularjs+mybatis实现二级评论系统(仿简书)
Feb 13 Javascript
jQuery实现的简单前端搜索功能示例
Oct 28 jQuery
小程序点击图片实现自动播放视频
May 29 Javascript
vue项目实现图片上传功能
Dec 23 Javascript
Vue清除定时器setInterval优化方案分享
Jul 21 Javascript
Openlayers3实现车辆轨迹回放功能
Sep 29 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
一个阿拉伯数字转中文数字的函数
2006/10/09 PHP
杏林同学录(九)
2006/10/09 PHP
轻松修复Discuz!数据库
2008/05/03 PHP
PHP实现简易用户登录系统
2020/07/10 PHP
JavaScript ECMA-262-3 深入解析.第三章.this
2011/09/28 Javascript
js原型链原理看图说明
2012/07/07 Javascript
多种方法实现load加载完成后把图片一次性显示出来
2014/02/19 Javascript
jQuery实现的网页左侧在线客服效果代码
2015/10/23 Javascript
JavaScript关于提高网站性能的几点建议(一)
2016/07/24 Javascript
浅析上传头像示例及其注意事项
2016/12/14 Javascript
Bootstarp基本模版学习教程
2017/02/01 Javascript
基于vue.js轮播组件vue-awesome-swiper实现轮播图
2017/03/17 Javascript
jquery submit()不能提交表单的解决方法
2017/04/24 jQuery
js实现前端图片上传即时预览功能
2017/08/02 Javascript
基于vue.js快速搭建图书管理平台
2017/10/29 Javascript
Vue中的Vux配置指南
2017/12/08 Javascript
Node实战之不同环境下配置文件使用教程
2018/01/02 Javascript
详解vuex之store拆分即多模块状态管理(modules)篇
2018/11/13 Javascript
JavaScript 监听组合按键思路及代码实现
2020/07/28 Javascript
Linux(Redhat)安装python3.6虚拟环境(推荐)
2018/05/05 Python
mac 上配置Pycharm连接远程服务器并实现使用远程服务器Python解释器的方法
2020/03/19 Python
解决windows上安装tensorflow时报错,“DLL load failed: 找不到指定的模块”的问题
2020/05/20 Python
Django配置Bootstrap, js实现过程详解
2020/10/13 Python
python模块内置属性概念及实例
2021/02/18 Python
英国在线滑雪板和冲浪商店:The Board Basement
2020/01/11 全球购物
正规的求职信范文分享
2013/12/11 职场文书
初中物理教学反思
2014/01/14 职场文书
《黄山奇石》教学反思
2014/04/19 职场文书
《明天,我们毕业》教学反思
2014/04/24 职场文书
梅花魂教学反思
2014/04/25 职场文书
二年级班级文化建设方案
2014/05/10 职场文书
拾金不昧感谢信
2015/01/21 职场文书
2015年教师师德师风承诺书
2015/04/28 职场文书
幼儿园新学期开学寄语
2015/05/27 职场文书
老生常谈 使用 CSS 实现三角形的技巧(多种方法)
2021/04/13 HTML / CSS
Python+pyaudio实现音频控制示例详解
2022/07/23 Python