vue多页面应用
配置vue多页面，生成的vue项目默认是单页面
单页面和多页面的优缺点：
多页面应用： 一个网址对应一个页面资源
1) 缺点：跳转一个页面都需要重新加载整个页面的资源，页面跳转会刷新！
2) 优点：seo优化好
单页面应用：整个网站都只有一个页面，里面通过相关手段展示不同的内容
1) 优点：页面的跳转是使用js 实现判断路径的变化，去展示不同的组件内容。 页面自始至终都不会重新加载资源！
2) 优点：维护容易； 复用性强；组件缓存； 体验感好；快发速度快；
3) 缺点：首次访问网页加载慢(因为要加载整个应用资源，相对多页面而言，首次访问多页面应用的某个页面只会加载该页面的资源)，而且如果业务模块越来越多了，会导致首次访问单页面应用加载打包后的资源比之前变的越来越大，加载会变得越来越慢的问题
4)缺点：不利于seo优化！
多页面是指一个应用中有多个页面，页面跳转时是整页刷新
一.vue-cli3多页面
1.在src文件夹下新建两个页面文件夹
2.每个页面文件夹下都有基本的一个.html后缀的文件（页面模板文件），.js文件（主入口）和.vue（根组件）
public下面的index.html模板文件已经没有作用了，可以删除
3.因为失去了默认的入口文件和页面，我们需要自己重新配置,在项目的根目录下新建vue.config.js文件
这边使用一个npm的包glob，不知道是不是帮你下载了还是node内置的对象，我是没有安装直接使用。关于glob的匹配规则和方法可以自行百度
const glob = require('glob')
function creatEntry () {const entryObj = {}glob.sync('./src/**/index.html').forEach(val => {// console.log(val, 'val----')// ./src/article/index.html val----// ./src/index/index.html val----const url = val.split('/')[2]entryObj[url] = {entry: `src/${url}/main.js`,template: `src/${url}/index.html`,filename: `${url}.html`}})return entryObj
}module.exports = {pages: creatEntry()
}
二.vue-cli2多页面
1.在src文件夹下新建pages目录，并新建两个页面article,index
2.每个页面文件夹下都有基本的一个.html后缀的文件（页面模板文件），.js文件（主入口）和.vue（根组件）
3.因为失去了默认的入口文件和页面，我们需要自己重新配置
1) 修改webpack.base.conf.js 配置文件入口文件，改为两个入口
entry: {article: './src/pages/article/main.js',index: './src/pages/index/main.js'}
2) 修改webpack.dev.conf.js配置文件模板文件配置
new HtmlWebpackPlugin({filename: 'article.html',template: './src/pages/article/index.html',inject: true,chunks:['article']}),new HtmlWebpackPlugin({filename: 'index.html',template: './src/pages/index/index.html',inject: true,chunks:['index']})
3) 修改webpack.prod.conf.js配置文件模板文件配置
先要修改config/index.js里面的build对象配置的index变量，因为webpack.prod.conf.js配置文件会用到，修改为如下：
article: path.resolve(__dirname, '../dist/article.html'),index: path.resolve(__dirname, '../dist/index.html'),
webpack.prod.conf.js里的HtmlWebpackPlugin配置改为如下：
new HtmlWebpackPlugin({filename: config.build.article,template: './src/pages/article/index.html',inject: true,chunks: ['manifest','vendor','article']}),new HtmlWebpackPlugin({filename: config.build.index,template: './src/pages/index/index.html',inject: true,chunks: ['manifest','vendor','index']})
‘manifest’,'vendor’作用：因为公共文件必须在自己引用的js文件之前引用。
4.注意点
1) 一般来说多页面，里面的其中一个页面，要输出index.html，因为应用默认打开index.html
2) 路由时跟着多页面里面的某个页面的，如果这个页面还没有被加载到，一开始就进行路由跳转，报404。
3) vue-cli2，a链接跳转其它页面，不能省略页面的.html，带上才能跳转成功
<ahref="/article.html"target="_blank">article-html</a>
4) 路由跳转了，但是页面没有变，很有可能，是在某个页面的根页面里面，没有加<router-view/>
