如何在基于vue-cli的項(xiàng)目自定義打包環(huán)境

在工作當(dāng)中，遇到了下面這個(gè)問題：

測試環(huán)境與生產(chǎn)環(huán)境中的用戶權(quán)限不一樣，因此，就需要根據(jù)測試環(huán)境打一個(gè)包，生產(chǎn)環(huán)境又打一個(gè)包。

可是，如果每次打包都需要更改權(quán)限的配置文件的話，會很麻煩，而且，體現(xiàn)不出一個(gè)coder該有的逼格。

為了更有逼格地解決這個(gè)問題，于是我百度了一番，上天不負(fù)有心人，讓我找到了解決方案。

在詳敘解決方案之前，先簡單介紹下解決方案當(dāng)中使用到的工具：cross-env,webpack.DefinePlugin

cross-env是給process.env當(dāng)中添加變量的，那process.env又是什么呢？

process是一個(gè)控制node.js的進(jìn)程，它是一個(gè)global對象，包含進(jìn)程相關(guān)的一些信息，而process.env則是包含用戶環(huán)境信息的一個(gè)對象，例如下面這樣的對象：

{
 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可以往這個(gè)process.env對象當(dāng)中添加自定義的數(shù)據(jù)，然后可以在任何node.js的執(zhí)行環(huán)境當(dāng)中獲取，一般是在打包配置當(dāng)中獲取process.env.NODE_ENV來判斷是哪種環(huán)境，然后再作相應(yīng)的配置。

官方解釋

如何使用cross-env

1. 安裝：npm i cross-env -D
2. 在npm自定義命令當(dāng)中使用；

"script":{
  "build:testing":"cross-env NODE_ENV=‘testing' webpack"
}

然后，我們執(zhí)行npm run build:testing的時(shí)候，就好執(zhí)行以上的命令，cross-env就會在process.env當(dāng)中添加一個(gè)NODE_ENV的屬性，屬性的值就是‘testing'字符串，注意這里是加了單引號的，因?yàn)檫@樣才是一個(gè)字符串，如果不加的話，就相當(dāng)于一個(gè)代碼片段，還要在獲取完之后通過JSON.stringify去轉(zhuǎn)成字符串。

webpack.DefinePlugin又是什么呢？

webpack.DefinePlugin是webpack自帶的一個(gè)插件，它的作用是在編譯的時(shí)候生成一些全局變量的，這里說的全局變量指的是客戶端的全局變量，相當(dāng)于掛載在window對象上的變量，我們可以利用它的這個(gè)功能在不同的環(huán)境（開發(fā)，測試，或者生產(chǎn)）當(dāng)中定義不同的行為。

官方介紹與使用

介紹完兩個(gè)插件了，是時(shí)候說一下兩者結(jié)合在實(shí)際當(dāng)中如何使用了。

下面將展示如何解決本文開頭一開始所提到的根據(jù)測試和生產(chǎn)環(huán)境配置不同的用戶權(quán)限的問題。

在config目錄下，根據(jù)不同的環(huán)境創(chuàng)建不同的配置文件

如上圖所示，test.env.js是測試環(huán)境的配置文件，prod.env.js則是生產(chǎn)環(huán)境的配置文件

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

分別創(chuàng)建測試與生產(chǎn)的權(quán)限配置文件

test.authority.js 測試環(huán)境權(quán)限

function getAuthority(userAuthority){
  const menus = [];
  switch(userAuthority){
    case 'zhangsan':
      menus = ["a","b","c","d"];  //這里的a,b,c,d相當(dāng)與路由配置當(dāng)中頁面的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 生產(chǎn)環(huán)境的配置方法頁和上面一樣，只不過是menus里的配置不同

使用cross-env配置對應(yīng)的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執(zhí)行的是測試環(huán)境的打包，npm run build則是生產(chǎn)環(huán)境的打包。

將當(dāng)前環(huán)境的配置添加到客戶端全局

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添加到全局變量當(dāng)中
plugins:[
new webpack.DefinePlugin({
  "ENV":env
})
]

根據(jù)環(huán)境信息配置用戶權(quán)限

要對用戶權(quán)限進(jìn)行控制是要先知道當(dāng)前登錄的是哪個(gè)用戶，因此用戶權(quán)限配置的操作是在登錄頁面完成的。

login.vue

//獲取環(huán)境信息，然后根據(jù)環(huán)境信息讀取對應(yīng)的權(quán)限配置文件
const env = ENV.NODE_ENV === "testing" ? "test" : "prod";

import getAuthority from `${env}.authority.js`;

export default {
  methods:{
    login(){
      axios({...}).then(res => {  //調(diào)用登錄接口獲取當(dāng)前用戶信息
        let userAuthority = getAuthority(res.userName);  //獲取當(dāng)前登錄用戶的頁面權(quán)限
        sessionStorage.setItem("authorityPages",JSON.stringify(userAuthority))  //將用戶的頁面權(quán)限保存起來，在生成側(cè)邊欄的時(shí)候通過v-if指令判斷是否渲染
      })
    }
  }
}

來到這里，就能夠解決本文一開始所提的問題了，下面總結(jié)一下。

總結(jié)

1. 根據(jù)不同的環(huán)境編寫對應(yīng)的打包環(huán)境信息配置文件；
2. 根據(jù)不同環(huán)境編寫對應(yīng)用戶權(quán)限配置文件；
3. 根據(jù)不同環(huán)境編寫對應(yīng)的npm打包命令，使用cross-env設(shè)置對應(yīng)的運(yùn)行時(shí)環(huán)境；
4. 在打包配置文件當(dāng)中根據(jù)運(yùn)行時(shí)環(huán)境獲取對應(yīng)的環(huán)境配置信息，然后使用webpack.DefinePulgin添加到客戶端全局變量當(dāng)中；
5. 登錄頁根據(jù)全局變量中的環(huán)境信息獲取對應(yīng)的用戶權(quán)限配置文件；
6. 用戶登錄之后根據(jù)獲取的用戶權(quán)限文件中的方法獲取登錄用戶的權(quán)限，并把當(dāng)前登錄用戶的權(quán)限保存起來以便之后使用。

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持億速云。