web前端基于vue的大型项目分模块开发_javascript_weixin

众所周知，在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代码上的冲突率也可以减少。这样一些需要长期独立开发而且又与主模块关联比较大模块上线时间可以不受版本的限制。

遇到的问题及解决方案

vue-router的mode只能用默认的，不能用history，这个地方的解决方案我还在研究。
路由组件懒加载问题。
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官方不提倡的方法。有更好的方法大家也可以交流一下。

以上就是个人在项目开发中遇到这种问题的解决思路，希望可以帮到大家，另外如果大神们有更好的解决办法也可以在评论讨论分享。