As we all know, after the emergence of Webpack and single-page applications, front-end engineers have become a one-stop solution from development to packaging, from the previous tedious many JS, CSS, HTML files to now packaged into one or several, can be said to be a progress. But as projects get bigger and teams get bigger, more modules need to be developed. Such a traditional single-page application can no longer meet the needs of the project.

Demand Background:

1. The project is relatively large and has many modules, requiring multiple front-end engineers to develop different modules respectively. 2. Each module goes online at a different time in the production environment, resulting in the need to hide the corresponding unfinished functions of different functional modules when they go online 3. Some modules need to be developed in a separate line and cannot be placed in the same version with other modules

Solution:

Take webpack’s multi-entry as the main idea, and then treat the specific problems.

Detailed implementation Plan

Vue multi-page project framework

Project Contents:

Modify the project launch script

After the project is changed to multi-page frame, each page will have an HTML page and entry js file, static file can be created in the static directory with the same name as the entry file. In this way, the live script can match the files that need to be live through the re.

The ideal state

In this way, after the project is modified, front-end engineers can be divided according to modules, and the conflict rate on SVN codes can be reduced. Such large modules that need to be developed independently for a long time and are associated with the main module can be released without the limitation of version.

Problems encountered and solutions

1. The mode of vue-router can only be used by default, not by history. I am still studying the solution of this place.
2. Lazy loading of routing components. In vue scaffolding, webpack is packaged by chunk by default. The name of chunk is id, so if the chunk files packaged by multiple pages can not be distinguished, sometimes the chunk packages produced by multiple developers may overwrite each other. The solution here is to use vue-Router to give a solution: divide components into component blocks. Specific implementation code:

const Foo = () => import(/* webpackChunkName: "group-foo"* /'./Foo.vue')
const Bar = () => import(/* webpackChunkName: "group-foo"* /'./Bar.vue')>
const Baz = () => import(/* webpackChunkName: "group-foo"* /'./Baz.vue')
Copy the code

You can change webpackChunkName to a name related to the module file name, for example, “app-name” is used for app modules. If “comments”: false in babelrc, it must be true. My project was never successful by component because it was false. 3. Vuex data sharing. Because jumping between multiple pages is a normal browser jump, data saved in VUex may be lost. The solution to this problem is to temporarily save the vuex data in sessionStorage before the page jump, and initialize the sessionStorage data into VUex after the jump. When leaving the page:

created () {
    let that = this;
    window.onunload = function () {
        sessionStorage.vuexState = JSON.stringify(that.$store.state)
    }
}
Copy the code

When entering the page:

created () {
    if(sessionStorage.vuexState){
        for(let i in JSON.parse(sessionStorage.vuexState)){
            this.$store.state[i] = JSON.parse(sessionStorage.vuexState)[i]
        }
    }
}
Copy the code

Of course, FOR the sake of convenience, I used the method not advocated by VUEX. There’s a better way and we can talk about it.

The above is my solution to this problem in project development. I hope it can help you. In addition, if you have a better solution, you can also share it in the comments.