需求：

在一个中后台中会有很多中不同系统，这时候我们需要拆分不同系统，这就需要用到vue中的多页面了。

首先来看看文档中的介绍：

1.先来了解一下publicPath

部署应用包时的基本 URL。用法和 webpack 本身的 output.publicPath 一致，但是 Vue CLI 在一些其他地方也需要用到这个值，所以请始终使用 publicPath 而不要直接修改 webpack 的 output.publicPath。

默认情况下，Vue CLI 会假设你的应用是被部署在一个域名的根路径上，例如 www.my-app.com/。如果应用被部署在一个… www.my-app.com/my-app/，则设置 publicPath 为 /my-app/。

这个值也可以被设置为空字符串 ('') 或是相对路径 ('./')，这样所有的资源都会被链接为相对路径，这样打出来的包可以被部署在任意路径，也可以用在类似 Cordova hybrid 应用的文件系统中。

相对 publicPath 的限制===需要注意的地方

相对路径的 publicPath 有一些使用上的限制。在以下情况下，应当避免使用相对 publicPath:

当使用基于 HTML5 history.pushState 的路由时；

当使用 pages 选项构建多页面应用时。

2.接下来重点就来了pages的配置

在 multi-page 模式下构建应用。每个“page”应该有一个对应的 JavaScript 入口文件。其值应该是一个对象，对象的 key 是入口的名字，value 是：

一个指定了 entry, template, filename, title 和 chunks 的对象 (除了 entry 之外都是可选的)；
或一个指定其 entry 的字符串。

操作步骤：

1. 创建好一个vue项目（具体步骤和操作环境的安装执行百度，很简单）
2. 创建好几个模板来源template

3.创建好对应的页面文件，其中view/index里面的是系统的根入口

4.在vue.config.js里面做配置

效果：

编译好项目，打开的效果图

选择不同的系统就会进入不同的页面