前端直接使用線上地址運行本地代碼進行開發,避開cookie、token問題,解決部分功能驗證只能在線上環境驗證問題


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可直接運行本地代碼;

完成!!!

注:該插件教程提供者《軒晨》,編輯人員《陳飛》


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM