vue element ui scaffold webpack4
1.0.0
目前已升級為webpack5 ，如需要使用webpack4，可切換分支： git checkout webpack4 。
**vue3 + element-ui + webpack5 版本：可切換分支： git checkout vue3 **
本專案為vue下使用了element-plus並基於webpack5建構的多頁面、多環境方案腳手架專案。
專案效果預覽1 專案效果預覽2
git clone https://github.com/hzsrc/vue-element-ui-scaffold-webpack4.git
# git checkout vue3
cd vue-element-ui-scaffold-webpack4
npm install
更快的建置速度，更小的打包檔案體積。
兩種方式，自動輸出html頁面檔案（html-webpack-plugin實作）：
開發時在src/iconfont/svgs目錄下，修改或新增、刪除svg文件，可自動產生字體圖示（支援ttf,woff2,woff,eot,svg）及配套的css樣式、html預覽；同時熱重載立即可以看到效果。 也可npm run build-font手動產生這些檔案。 無需再手動去icomoon.io或iconfont.cn產生和修改字體圖示、css、圖示預覽了。 基於webpack-iconfont-plugin-nodejs實作。
專案可採用dynamic-mocker作為後端介面的資料模擬。 模擬資料位於mock資料夾下，採用js檔案實現，易於理解且方便靈活。
啟用方法： 1、npm run dev預設會同時啟動mock服務。 2、單獨運行：npm run mock。
設定檔： 1、config/serverMap.js中的介面服務位址為：base: '"//localhost:8085"' 2、mock/mock-config.js檔案設定mock各種參數。
css按需載入的來源直接指向element-plus的scss文件，而不是預先編譯的css檔案。透過join-file-content-plugin插件在編譯時將src/assets/css/element-theme/theme-changed.scss檔案附加到element-plus主題變數檔案theme-chalk/src/common/var.scss之前，實現了在修改scss變數後即可立刻查看效果，無需預先編譯element-plus的scss檔為css檔。同時可以在專案任意地方引用element-plus的scss變數。
利用webpack-theme-color-replacer插件，在webpack建置時提取css中含有主題色的樣式規則，產生一個css/theme-colors.css檔案。然後在網頁運行時，下載這個css文件，動態替換其中的顏色為自訂主題色。由於只提取了顏色相關的css，故速度比下載element-plus整個css快很多。而且不只是element-plus的樣式，項目中的自寫樣式的主題色也可以一併替換掉。
發佈程式碼時產生原始碼映射檔案到統一的原始碼映射資料夾，並在測試環境自動映射。生產環境為了程式碼安全，不進行自動映射，如需偵錯支援chrome透過url手動映射原始碼。 根據安全要求，這個原始碼映射資料夾名稱是只有開發者知道的資料夾名稱。或採是用動態加密演算法產生此資料夾名。或將這些原始碼映射檔放到需要登入驗證的網站目錄下。目錄的名稱請依需求自行在config/index.js檔案的getSourceMapPath函數中修改。 這樣既可在出現bug需要進行線上調試時，快速手動添加源碼映射來方便調試，又避免了源碼洩漏。
採用vw+rem的簡潔方案實現響應式佈局。 使用postcss-pxtorem外掛程式自動將css中的單位由px轉換為rem，開發時仍使用px做為css長度單位。 1rem = 100px，調試時換算方便。 pc和行動端通用（行動端最好將element-plus換成其他UI框架）。
相容於IE10以上、Chrome、Firefox、Safari、QQ、360、2345等瀏覽器。如果需要改為行動端，請修改.browsersrc為行動端版本。
npm run dev
本地開發調試。使用config/serverMap.js中的dev配置的後端介面服務位址。
npm run build-test
用於測試環境部署。 js帶源碼映射，css無源碼映射。使用config/serverMap.js中的test配置的介面服務位址。
npm run build
用於生產環境部署。使用config/serverMap.js中的prod配置的介面服務位址。
npm run build-demo
設定同生產環境，僅介面服務位址不同，使用config/serverMap.js中的demo配置的介面服務位址。
npm run build-dev
用於發佈部署到開發環境伺服器，適用於需要發佈到伺服器才能調試的情況。使用config/serverMap.js中的dev配置的介面服務位址。
npm run build-preview
會啟用靜態mock數據，無需後端服務，使用mock數據來模擬ajax呼叫（前提是對應的api介面寫了mock數據）。 等同於npm run build --preview && npm run play-dist 。
npm run play-dist
以dist目錄為根目錄，啟動一個本地靜態http服務，用於查看發布後dist目錄的運行結果。
npm run mock
當後端介面服務尚未完成時，可用於模擬後端介面資料調試前端功能。
npm run proxy80
透過將現有端口（80xx端口）代理到80端口或443端口，可實現訪問時隱藏端口，也可實現https訪問。結合系統hosts配置127.0.0.1為指定的域名，可直接用域名訪問本地調試頁面，用於調試一些必須使用域名訪問的場景（例如調試微信，詳見：https://www.cnblogs.com/hz -blog/p/wechat-local-debug-domain.html）。
