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

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指令判断是否渲染
      })
    }
  }
}

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