web前端基於vue的大型專案分模組開發

暉暉暉暉哥發表於2018-07-11
Web前端Vue

眾所周知，在webpack和單頁面應用出現之後，前端工程師從開發到打包已經是一站式解決方案，由之前繁瑣的很多個js,css,html檔案到現在打包成1個或幾個，可以說是一個進步。但是隨著專案越來越大，團隊的人越來越多，需要開發的模組也越來越多。這樣傳統的單頁面應用已經滿足不了專案需求。

需求背景：

1.專案比較大，模組多，需要多個前端工程師分別開發不同的模組。
2.各模組上線生產環境的時間不同，導致不同功能模組在上線時要隱藏相應未完成的功能
3.有的模組需要單獨一條線開發，沒法和其他模組放在一個版本里

解決思路：

以webpack的多入口為主導思路，然後具體問題具體對待。

詳細實施方案

vue多頁面專案框架

專案目錄：

web前端基於vue的大型專案分模組開發

主要是依據webpack的entry設定多個入口，然後打包的時候根據入口打包成多個模組。
由於我是直接在原來單頁面的框架上改的，所以main.js和App.vue還在最外層，如果是新的框架的話可以全都放到pages裡
多入口具體配置可參考：https://segmentfault.com/a/1190000011265006

專案上線指令碼修改

專案改成多頁面框架後，打包後每個頁面都會有一個html頁面和入口js檔案，靜態檔案可以在static裡新建一個和入口檔案相同名稱的目錄。這樣上線指令碼可以通過正則匹配需要上線的檔案。

理想狀態

這樣專案修改後前端工程師可以按模組分工，svn程式碼上的衝突率也可以減少。這樣一些需要長期獨立開發而且又與主模組關聯比較大模組上線時間可以不受版本的限制。

遇到的問題及解決方案

  1. vue-router的mode只能用預設的，不能用history，這個地方的解決方案我還在研究。
  2. 路由元件懶載入問題。
    vue腳手架裡webpack預設的分chunk打包方式，chunk名都是id,這樣如果多頁面打包出來的chunk檔案不好區別，有時多個開發者打出來的chunk包有可能會相互覆蓋。這裡解決方法是用vue-router給出了一種解決方案：把元件按組分塊。
    具體實現程式碼：
const Foo = () => import(/* webpackChunkName: "group-foo" */ './Foo.vue')
const Bar = () => import(/* webpackChunkName: "group-foo" */ './Bar.vue')>
const Baz = () => import(/* webpackChunkName: "group-foo" */ './Baz.vue')
複製程式碼

可以將webpackChunkName修改成跟模組檔名相關的名稱，例如app模組以後就統一用"app-name"。
PS:這裡有一個細節，就是babel的配置檔案.babelrc裡 如果"comments": false，一定是改成true。我的專案就因為是false所以按組分塊一直不成功。 3. vuex資料共享。
因為多頁面之間跳轉是正常的瀏覽器跳轉，所以儲存在vuex的資料可能會丟失。解決這個問題的辦法就是在頁面跳轉前臨時將vuex的資料儲存在sessionStorage中，跳轉完成後將sessionStorage的資料初始化到vuex中。具體程式碼：
離開頁面時：

created () {
    let that = this;
    window.onunload = function () {
        sessionStorage.vuexState = JSON.stringify(that.$store.state)
    }
}
複製程式碼

進入頁面時：

created () {
    if(sessionStorage.vuexState){
        for(let i in JSON.parse(sessionStorage.vuexState)){
            this.$store.state[i] = JSON.parse(sessionStorage.vuexState)[i]
        }
    }
}
複製程式碼

當然這個地方我為了方便用的是vuex官方不提倡的方法。有更好的方法大家也可以交流一下。

以上就是個人在專案開發中遇到這種問題的解決思路，希望可以幫到大家，另外如果大神們有更好的解決辦法也可以在評論討論分享。

相關文章