Vue multi-page configuration details

1. The difference between multiple pages

The concept of single-page application emerged with the emergence of frameworks such as AngularJS , React , and Ember in the past few years. In the previous introduction, we talked about partial refresh of the page in page rendering, and the single-page application uses the partial refresh capability of the page to refresh the page content when switching pages, thereby obtaining a better experience.

2. SPA and MPA

The differences between SinglePage SinglePage Web Application Application (SPA) and MultiPage Application (MPA) are as follows:

3. Vue Cli scaffolding configuration

first step:

We create a main page and a sub-page under the public file. The directory structure is as follows

Step 2:

With the main page and the sub-page, there must be corresponding main page entry files and sub-page entry files. The directory structure is as follows

Step 3:

Configuring pages in vue.config.js can be understood as a configuration mapping of multiple pages.

pages: {
    index: {
        entry: 'src/main.js',
        template: 'public/index.html',
        filename: 'index.html',
    },
    bangban:
        entry: 'src/banban.js',
        template: 'bangban.html',
        filename: 'public/bangban.html'
    }
}

This is the end of this article about the details of vue multi-page configuration. For more relevant vue multi-page configuration content, please search for previous articles on 123WORDPRESS.COM or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future!