在基於vue cli的專案自定義打包環境

在工作當中，遇到了下面這個問題：

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

process是乙個控制node.js的程序，它是乙個global物件，包含程序相關的一些資訊，而process.env則是包含使用者環境資訊的乙個物件，例如下面這樣的物件：

官方解釋

"script":

介紹完兩個外掛程式了，是時候說一下兩者結合在實際當中如何使用了。

下面將展示如何解決本文開頭一開始所提到的根據測試和生產環境配置不同的使用者許可權的問題。

如上圖所示，test.env.js是測試環境的配置檔案，prod.env.js則是生產環境的配置檔案

const merge = require('webpack-merge')

const devenv = require('./dev.env')
module.exports = merge(devenv, )

module.exports =

function getauthority(userauthority)

return menus;
}export default getauthority;

"scripts":

const env = process.env.node_env === 'testing' ? require("../config/test.env.js") : require("../config/prod.env.js");

//配置webpack.defineplugin將env新增到全域性變數當中
plugins:[
new webpack.defineplugin()
]

//獲取環境資訊，然後根據環境資訊讀取對應的許可權配置檔案

const env = env.node_env === "testing" ? "test" : "prod";
import getauthority from `$.authority.js`;
export default ).then(res => )}}
}

根據不同的環境編寫對應的打包環境資訊配置檔案；

根據不同環境編寫對應使用者許可權配置檔案；

根據不同環境編寫對應的npm打包命令，使用cross-env設定對應的執行時環境；

在打包配置檔案當中根據執行時環境獲取對應的環境配置資訊，然後使用webpack.definepulgin新增到客戶端全域性變數當中；

登入頁根據全域性變數中的環境資訊獲取對應的使用者許可權配置檔案；

使用者登入之後根據獲取的使用者許可權檔案中的方法獲取登入使用者的許可權，並把當前登入使用者的許可權儲存起來以便之後使用。

vue cli 自定義配置全域性元件

在components資料夾load中新建loading.vue和loading.js兩個檔案，vue檔案用來寫公共元件，js用來匯出這個元件 在loading.js中，規定了使用這個元件的名字，以及使用方法 import loading from loading.vue const loading...

在專案中如何自定義的Eslint配置

在你的前端專案中找到.eslintrc.js檔案，如圖 module.exports env extends plugin vue recommended eslint recommended add your custom rules here it is base on rules vue ht...

新增自定義監控專案

需求 監控某台web的80埠連線數，並出圖 兩步 1 zabbix監控中心建立監控專案 2 針對該監控專案以圖形展現 對於第一步，需要到客戶端定義指令碼 vim usr local sbin estab.sh 內容如下 路徑和名字都是自定義。bin bash 獲取80埠併發連線數 netstat a...