在工作中，我遇到了以下问题：

测试环境中的用户权限不同于生产环境中的用户权限，因此需要根据测试环境制作一个包，在生产环境中制作另一个包。

但是，如果每次打包的时候都需要更改权限配置文件，那就非常麻烦了，而且也不会显示一个程序员应该具备的条件。

为了更有力地解决这个问题，我百度了一下，上帝有回报，于是我找到了解决办法。

在详细描述解决方案之前，简要介绍一下解决方案中使用的工具：cross-env、webpack。定义替换

Cross-env向process.env添加变量什么是process.env？

Process是一个控制node.js的进程，它是一个包含一些与进程相关的信息的全局对象，而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

官方解释

如何使用跨环境

安装：npm i cross-env -D用于npm自定义命令；脚本' : { ' build : testing ' : ' cross-env node _ env=' testing ' web pack ' }然后，当我们执行npm run build:testing时，执行上面的命令就好了。Cross-env将向process.env添加一个NODE_ENV属性，该属性的值为“testing”字符串。注意这是一个带单引号的字符串，因为如果不加，就相当于一个代码片段，获取后通过JSON.stringify转换成字符串。

什么是webpack？定义折叠？

网络包。DefinePlugin是WebPack附带的一个插件。它的功能是在编译时生成一些全局变量。这里的全局变量指的是客户端的全局变量，相当于装载在窗口对象上的变量。我们可以使用这个函数来定义不同环境(开发、测试或生产)中的不同行为。

官方介绍和使用

在介绍了这两个插件之后，是时候谈谈如何在实践中使用它们了。

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

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

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

Test.env.js配置

const merge=require(' web pack-merge ')const devenv=require('。/dev.env)模块。exports=merge (devenv，{ node _ en v : ' ' testing ' ' })prod . env . js配置

模块。导出={node _ env:' production'}分别为测试和生产创建权限配置文件

Test.authority.js测试环境授权

函数getAuthority(user authority){ const menu=[]；switch(UserAuthority){ case ' Zhang San ' : menu=[' a '，' b '，' c '，' d ']；//这里的A、B、C、D相当于路由配置中页面的断名；case ' Lishi ' : menu=[' a '，' b '，' c ']；打破；case '吴王' :菜单=['b '，' c '，' d ']；打破；default:菜单=['a '，' b ']；}返回菜单；}导出默认getAuthorityprod.authority.js生产环境的配置方法页面和上面一样，只是菜单中的配置不同

使用交叉环境来配置相应的节点环境

package.json

脚本' : { ' 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 '？要求('./config/test . env . js '): require('./config/prod . env . js ')；//配置网络包。定义插件将环境添加到全局变量插件：[新网络包。定义插件({'env' : env})]根据环境信息配置用户权限

要控制用户权限，首先要知道当前登录的是哪个用户，所以用户权限配置的操作是在登录页面完成的。

login.vue

//获取环境信息，然后读取对应的权限配置文件const env=env。node _ env==' testing '？测试“:”产品；从` ${env}.authority.js '导入getAuthority导出默认的{ methods : { log in(){ axios({ 0.}).然后(RES={//调用登录界面获取当前用户信息让用户权限=获取权限(RES . username)；//获取页面权限session storage . setitem(' authoritypages '，JSON。strictify(用户权限))//保存用户的页面权限，在生成侧边栏时通过v-if指令判断是否渲染})}}}当你来到这里，可以解决本文开头提出的问题，总结如下。

摘要

根据不同的环境编写相应的封装环境信息配置文件；根据不同环境编写相应的用户权限配置文件；根据不同的环境编写相应的npm打包命令，并使用cross-env设置相应的运行时环境；根据打包的配置文件中的运行时环境获取相应的环境配置信息，然后使用webpack将其添加到客户端全局变量中。定义发布；登录页面根据全局变量中的环境信息获取对应的用户权限配置文件；登录后，用户可以根据获取的用户权限文件中的方法获取已登录用户的权限，并保存当前登录用户的权限以备后用。以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。