最近在思考如何提供一種前后端開發功能測試既高效又安全的方案，因為對於我平時的項目是前后端同時進行的，后端我已經有了完備的權限管理，前端不能的角色會有不同的訪問數據權限。而在vue前后端分離開發情況下，由於后端沒有登陸人員的信息，因此除了開放訪問的資源都是被拒絕訪問的。這時有沒有什么辦法可以在dev環境下開放權限，而在構建的生產版本中是有完整權限控制的呢？
一個自然的思路是：如果是dev環境后端就放開所有權限，如果是生產環境就有權限管理。但是問題是這個dev環境是指前端的，后端並不能知道。要通知后端是開發還是生產環境，可以通過http的header來傳遞這個信息。當我們在做前端開發時，就傳這個header,否則就不加該header條目。
另外一方面，我們必須考慮安全性，因為前端傳遞dev/prod信息是不可靠的，我的思路是前端除了傳遞一個dev/prod環境之外，還必須傳一個token密碼，該密碼屬於敏感信息，因此不會在代碼中出現。問題又來了，由於密碼信息在env.js中配置，只有webpack構建時通過nodejs代碼讀取，如何傳遞給我們的源代碼呢？
要解決這個問題，就需要介紹webpack的DefinePlugin了，它可以將webpack的構建信息傳遞給我們的js源代碼!
我們再看另外一個常見場景:我們的ajax請求對應的host主機在開發和生產肯定是不一樣的，這時對於dev和prod兩種場景，我們希望將對應的host/port信息傳遞給我們的源代碼，這樣無論在dev,staging,prod都能請求到正確的entry.這時也是DefinePlugin的一個應用場景。
具體辦法:
上面我們通過__API__這個由DefinePlugin定義的變量傳遞到我們的js代碼中，這樣我們的js代碼通過hostUrl這個常量就能永遠訪問到正確的entry了！
其中有一點需要注意的是DefinePlugin定義的變量如果是字符串必須使用 "' your string '" 這種形式，一般我們可以通過stringify調用就好了，因為它自動會加上雙引號!
new webpack.DefinePlugin({ 'process.env.NODE_ENV': JSON.stringify('production'), }),