如何在基于vue-cli的项目自定义打包环境
136 浏览量
2020-12-08
19:04:12
上传
评论
收藏 71KB PDF 举报
如何在基于如何在基于vue-cli的项目自定义打包环境的项目自定义打包环境
在工作当中，遇到了下面这个问题：
测试环境与生产环境中的用户权限不一样，因此，就需要根据测试环境打一个包，生产环境又打一个包。
可是，如果每次打包都需要更改权限的配置文件的话，会很麻烦，而且，体现不出一个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
安装：npm i cross-env -D
在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目录下，根据不同的环境创建不同的配置文件
评论0
最新资源