vue-cli3及以上版本创建多页面应用。

为什么要多页面？

    以实际场景为例，到了某个节日，需要根据需求做一个活动页，并且活动页技术体系和原本单页面一样（如vue），并且多端共用此页面（不能集成在原本的单页应用里了，太庞大）。那么我们要么是单独开一个项目，要么就是想办法将项目改造成多页面。介于前者太浪费资源且没必要（因为很多共用部分，甚至组件共用），所以我们选择将vue-cli改造成多页面应用。  

先摆一些小坑：

1.无法通过路径访问多页面的某一页面，例如：

http://172.16.10.181:8080/subPage.html 

http://172.16.10.181:8080/index.html

2.单页面的时候没事，改为多页面后，页面空白，并弹出警告：

The resource http://172.16.10.181:8080/js/subpage.js was preloaded using link preload but not used within a few seconds from the window's load event. Please make sure it has an appropriate `as` value and it is preloaded intentionally.

问题先放一放，现根据官网api实现多页面配置（会在下面代码注释中说明）。

目录结构（打x的是脚手架自带，改为多页无用的文件）：

vue.config.js

module.exports = {

    pages: {
        index: {
            // page 的入口
            entry: 'src/page/index/main.js',
            // 模板来源
            template: 'src/page/index/index.html',
            // 在 dist/index.html 的输出
            filename: 'index.html',
            // 当使用 title 选项时，
            // template 中的 title 标签需要是 <title><%= htmlWebpackPlugin.options.title %></title>
            title: 'Index Page',
            // 在这个页面中包含的块，默认情况下会包含
            // 提取出来的通用 chunk 和 vendor chunk。
            // 最后一项需要设置为和key值一样的字符串，不然则会报第二个小坑的错误，
            // 切记要一模一样，代表着这部分需要这个模块。
            // 三个都要配置，且最后一项，也就是模块名不可重复，否则会无法访问
            chunks: ['chunk-vendors', 'chunk-common', 'index']
        },
        // 当使用只有入口的字符串格式时，
        // 模板会被推导为 `public/subpage.html`
        // 并且如果找不到的话，就回退到 `public/index.html`。
        // 输出文件名会被推导为 `subpage.html`。
        subpage: {
            // page 的入口
            entry: 'src/page/subPage/main.js',
            // 模板来源
            template: 'src/page/index/index.html',
            // 在 dist/index.html 的输出
            filename: 'subPage.html',
            // 当使用 title 选项时，
            // template 中的 title 标签需要是 <title><%= htmlWebpackPlugin.options.title %></title>
            title: 'sub Page',
            // 在这个页面中包含的块，默认情况下会包含
            // 提取出来的通用 chunk 和 vendor chunk。
            // 最后一项需要设置为和key值一样的字符串，不然则会报第二个小坑的错误，
            // 切记要一模一样，代表着这部分需要这个模块。
            // 三个都要配置，且最后一项，也就是模块名不可重复，否则会无法访问
            // 注意此处我们虽然文件名是subPage.html，但是我们的key值并不是驼峰格式，
            //以key为准，不要被文件名影响
            chunks: ['chunk-vendors', 'chunk-common', 'subpage']
        }
    }
}

其实cli已经封装的很简单了，配置一个pages就可以实现多页面了，各个配置项我们还要仔细点，不然就会有很多小问题出现，弄的一头雾水