web前端基於vue的大型項目分模塊開發

衆所周知，在webpack和單頁面應用出現以後，前端工程師從開發到打包已是一站式解決方案，由以前繁瑣的不少個js,css,html文件到如今打包成1個或幾個，能夠說是一個進步。可是隨着項目愈來愈大，團隊的人愈來愈多，須要開發的模塊也愈來愈多。這樣傳統的單頁面應用已經知足不了項目需求。

需求背景：

1.項目比較大，模塊多，須要多個前端工程師分別開發不一樣的模塊。
2.各模塊上線生產環境的時間不一樣，致使不一樣功能模塊在上線時要隱藏相應未完成的功能
3.有的模塊須要單獨一條線開發，無法和其餘模塊放在一個版本里

解決思路：

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

詳細實施方案

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官方不提倡的方法。有更好的方法你們也能夠交流一下。

以上就是我的在項目開發中遇到這種問題的解決思路，但願能夠幫到你們，另外若是大神們有更好的解決辦法也能夠在評論討論分享。