vue单页面改造多页面应用

单页面和多页面的区别这里就不细说了。我司业务适合多页面，许多小应用都是通过iframe整体嵌入的形式。

1. 如果项目过于庞大，就会有很不好的体验问题。
2. 拆分多个项目的话，又会有额外的开支，如服务器资源部署等问题。

基于此改造的目标

1. 单独业务逻辑单独一个页面
2. 可实现单命令打包
3. 可单独打包

首先我们准备一个基础的项目，目录结构如下

src目录为我们平时开发的目录，dist为打包后的目录，整体结构如图

1 将当前项目改造成多页面目录

pages下为我们开发的目录文件，改造过程就是将原src下所有目录结构复制到home，index每个页面单独一份 为了提现多页面优势，这里我们选用两款ui框架，以便最后做下打包体积对比

npm i element-ui -S
npm i ant-design-vue -S 

在home和index中分别引入 home页面类似，然后我们更改vue.config.js

module.exports = {
  publicPath: './',
  productionSourceMap: false,
  pages: { // vue cli3 自带多页面配置
    index: {
      entry: `src/pages/index/main.js`,
      template: `public/index.html`,
      filename: `index.html`
    },
    home: {
      entry: `src/pages/home/main.js`,
      template: `public/index.html`,
      filename: `home.html`
    }
  },
  devServer: {
    port: 8080
  },
  lintOnSave: false
} 

现在我们打包，看一下生成的目录结构

 File