Requirements:

There are many different systems in a middle background, and we need to split the different systems, which requires the use of multiple pages in VUE.

First, take a look at the documentation:

1. Look at publicPath

The base URL when deploying the application package. PublicPath is the same as webpack’s own output.publicPath, but the Vue CLI also uses this value in some other places, so always use publicPath instead of modifying WebPack’s output.publicPath directly.

By default, the Vue CLI assumes that your application is deployed at the root of a domain name, such as www.my-app.com/. If the application is deployed in a… www.my-app.com/my-app/, set publicPath to /my-app/.

The value can also be set to an empty string (“) or a relative path (“./ “), so that all resources are linked to a relative path, so that the output package can be deployed on any path, or can be used on file systems such as Cordova Hybrid.

Restrictions on relative publicPath === Note

The publicPath of relative paths has some limitations. You should avoid using relative publicPath when:

When using HTML5 history.pushState based routing; When building a multi-page application using the Pages option.Copy the code

2. Next, focus on the configuration of Pages

Build the application in multi-Page mode. Each “page” should have a corresponding JavaScript entry file. The value should be an object whose key is the name of the entry and whose value is:

An object specifying entry, template, filename, title, and chunks (all optional except entry); Or a string specifying its entry.Copy the code

Operation steps:

  1. Create a good VUE project (specific steps and the installation of the operating environment to execute Baidu, very simple)
  2. Create several template source templates

3. Create a corresponding page file. View /index is the root entry of the system

4. Perform the configuration in vue.config.js

Effect:

Compile the project and open the renderings

Selecting different systems will take you to different pages