这篇文章主要介绍了vue-cli3多页应用改造的示例分析，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。
创新互联公司主营富县网站建设的网络公司,主营网站建设方案,成都App制作,富县h5微信小程序开发搭建,富县网站营销推广欢迎富县等地区企业咨询
需求
一个平台P，包含产品a、b、c、d、e。各产品UI样式风格统一，且会用到公共配置（HOST、是否添加埋点js）、组件（头部导航、表格、搜索框）、方法（请求拦截、生成UUID）。
现状：由于历史遗留原因，各产品为独立SPA、各自维护，配置、组件也都自成一体，只是大概样式上保持了一致，但细节（比如同一面包屑样式，左边距5px、8px都有）都不一致。
这种情况下，改组件、改配置都得一改改多个地方，且有些项目是vue-cli2、有些是vue-cli3，项目间依赖包的版本也不一致，维护起来非常不友好。
目标：整合各产品单页应用为MPA，提取公共文件（主题、配置、组件、方法），减少规范性东西的维护成本。
目录结构对比
整合前
bds-bank-fe │ README.md │ │// 静态资源输出目录 │ └───dist │ └───index.html + static // 平台首页 │ └───label // 产品a │ │ └───index.html + static │ └───metrics // 产品b │ └───service // 产品c │ └───help // 产品d │ │// 项目路径 │ └───help-center // 产品d └───portal-page // 平台首页 └───service-doc // 产品c └───unify-label // 产品a └───unify-metrics // 产品b │ └───build │ └───config │ └───src
整合后
│// 静态资源输出目录 │ └───dist │ └───index.html │ └───label.html │ └───metric.html │ └───service.html │ └───stocktake.html │ └───css │ └───js │ └───img ├── public │ └───favicon.ico │ └───index.html │ │// 项目路径 │ ├── src │ └── assets │ └── components │ ├── pages │ ├── index │ ├── label │ ├── metric │ ├── service │ ├── stocktake
实现
vue-cli 3.0官方支持多页，重点在于vue.config.js文件中pages这个配置项，每个页面单独配置entry、template、filename等。pages配置说明
// 官网示例如下
module.exports = {
pages: {
index: {
// page 的入口
entry: 'src/index/main.js',
// 模板来源
template: 'public/index.html',
// 在 dist/index.html 的输出
filename: 'index.html',
// 当使用 title 选项时，
// template 中的 title 标签需要是 <%= htmlWebpackPlugin.options.title %>
title: 'Index Page',
// 在这个页面中包含的块，默认情况下会包含
// 提取出来的通用 chunk 和 vendor chunk。
chunks: ['chunk-vendors', 'chunk-common', 'index']
},
// 当使用只有入口的字符串格式时，
// 模板会被推导为 `public/subpage.html`
// 并且如果找不到的话，就回退到 `public/index.html`。
// 输出文件名会被推导为 `subpage.html`。
subpage: 'src/subpage/main.js'
}
}Step1: 创建新项目
选择需要的Babel、Router、Vuex、eslint...
具体步骤参考官网：创建一个项目
Step2: 修改配置文件vue.config.js
在根目录下新建public文件夹，包含favicon.ico和index.html两个文件。
index文件内容如下：