1.在chrome瀏覽器打開下插件網站:https://crxdl.com/,下載《SwitchyOmega》插件包文件;
2.將chrome瀏覽器的"更多工具"》“擴展程序”》開啟開發者模式,具體如下圖:

3.將下載后SwitchyOmega插件包找到該壓縮文件夾下的crx后綴文件,拖拽至chrome的擴展程序操作頁面中,
如下圖為安裝成功,切記要開啟chrome擴展程序的‘’開發者模式‘’


4.點擊chrome右上角的擴展程序圖標可將SwitchyOmega插件進行置頂至瀏覽器操作欄,點擊圖上SwitchyOmega圓圈圖標,並點擊“選項”打開該插件選項配置如下圖:

5.npm全局安裝whistle ,在命令行工具輸入npm install -g whistle進行全局安裝,命令行輸入w2 start命令,啟動whistle插件,
如下圖:

並找到啟動的本地服務地址,在瀏覽器打開該地址例如:http://192.168.0.186:8899/,如下圖:

6.如代理的線上地址為https,需下載https相關證書,下載安裝教程如下:
①點擊https選項

②勾選紅框選項,點擊dowload下載證書

③下載證書完成后雙擊該證書進行安裝,一頓操作,到如下圖進行該設置,點擊下一步完成證書安裝即可

6.配置Rules代理規則如下圖,配置完成后切記要ctrl + s保存下
舉例我的配置如下:
# 規則:自定義域名或URL<空格>本地目錄路徑 (以下示例請替換為自己本地的寫法)
https://platform-test.wshoto.com/ 192.168.0.186:8080

7.修改vue.config.js文件中proxy配置如下圖:

本地啟動前端項目代碼,並設置端口號為8080,本地開啟服務要與圖上配置一致如:192.168.0.186:8080
8.瀏覽器輸入項目線上地址例如:https://platform-test.wshoto.com/index/dashboard,
並點擊瀏覽器插件程序圖上SwitchyOmega圓圈圖標,並點擊“proxy”打開代理功能,
此時瀏覽器打開的https://platform-test.wshoto.com/index/dashboard網址實際上運行的是192.168.0.186:8080//index/dashboard本地代碼,
且項目無需再設置token,cookie可直接運行本地代碼;
完成!!!
注:該插件教程提供者《軒晨》,編輯人員《陳飛》
