vue2如何根據不同的環境配置不同的baseUrl


 

  在正常的開發中,通常我們需要在線上的測試環境中運行代碼來檢查是否有些線上才會出現的bug或者是問題。每次去特意的修改我們的baseUrl顯然是不現實的,而且說不定哪天忘記了估計會被大佬噴死🤨

  首先,這是我們需要動的目錄結構:

 

 

   VUE2的腳手架已經為我們配置好了開發環境和生產環境,其實測試環境基本上與生產環境並不會相差太遠。這就意味着我們可以使用CV大法來完成絕大多數的部分。

  第一步,創建我們的test.env.js(這個名字其實起什么都可以,這樣寫只是為了以后方便維護)

 

創建完成后,復制build文件夾下面的webpack.prod.conf.js。創建一個webpack.test.conf.js,並將圖中的文件路徑改成我們剛剛創建好的test.env.js。

 

 

  然后再將我們打包主要的build.js文件復制一下,並進行一些修改

 

   走到這里,基本上已經完成了一大半了,剩下的只需將vue-cli涉及到 production的部分都進行下判斷就可以了。

  1.untils.js文件

 

  2.webpack.base.conf.js

 

  3.vue-loader.conf.js文件

 

  最后,在package.json文件中新增命令,這樣就大功告成了!

 

 

   現在讓我們在項目中調用看看是否發生了改變

Test環境:

 

 正常線上環境:

 

 

 

 當然具體的業務實現還是需要看各位的公司需要配置些什么東西,反正我僅設置了axios的baseURL 😂

 


免責聲明!

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



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