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

以上就是我的在项目开发中遇到这种问题的解决思路，但愿能够帮到你们，另外若是大神们有更好的解决办法也能够在评论讨论分享。