vue 一套代碼支持多個項目


參考:https://segmentfault.com/a/1190000015424032

一:根據不同的環境變量運行差異化不太大的不同項目

1.安裝cross-env包

cross-env能跨平台地設置及使用環境變量

npm install cross-env --save-dev

2.設置一個變量 在編譯階段,根據編譯傳入的變量不同,編譯不同的組件

修改package.json里的運行、打包命令(根據文件名進行運行、打包)

3.修改config下面的prod.env.js配置文件

4.組件的拆分:把共用的組件拆分成一個一個的組件

目錄結構:

 

5.根據項目的不同創建不同的文件

每個文件里面進行組件的重組以及差異化的東西

設置路由文件的時候根據環境變量引入

也可以設置別名 使用別名引入

二:路由模塊化(根據路由文件配置的不同來決定哪個功能)

例如一共有兩個功能,停車功能、商場售票功能。有的商場兩個功能都有,有的只有其中的一個

把負責不同功能的路由寫到兩個文件中 shop.js park.js

然后在router的index.js中進行整合

根據功能的不同配置不同的routes

注:只要import這個路由就算routes里面不配置npm run build打包之后打包文件里還是會有這個功能的代碼  目前就只能使用功能的時候在import引入路由 避免打包進去不需要的代碼 還沒想到更好的實現方式

如果三個商場中有兩個只有首頁不一樣 別的頁面是否需要另外復制一份 原先沒有路由模塊化的時候判斷是哪個商場並且是不是首頁來給變量重新賦值是可以實現的 但是路由模塊化之后實現不了 只能在復制一份 還沒想到更好的方式

 


免責聲明!

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



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