vue-cli搭建自动化多页面项目（vue高阶）

序：

我接下来写的vue项目高阶操作文章，每篇都按照需求分析+操作的模式来写。

需求分析：

大家都知道vue主要是用于搭建 单页Web应用（single page web application，SPA），根据实践，需要多页面的场景有以下几种：

• 首屏优化，这是SPA应用的固有的问题，（后面会用一章专门讲这个），而利用多页面就是将首屏（登录页等）独立出来一个html，首次加载时只加载这个依赖很少的html。
• 分模块开发，例如需要增加有不同权限的后台某个功能，按照以前需要新建一个项目，而利用多页面就是增加多一个出入口的事。
• 某些页面独立出来，例如有某个页面含有很多与第三方（微信等）交互的功能，这就需要后台配合生成签名等操作，这样就会导致 后台到第三方到客户端的各种重复调转，有些还需要通过url传各种参数，麻烦而且不安全，利用多页面就是将此页面独立出来打包成一个html静态页面，直接放到后端让后台直接完成第三方对接逻辑。

以上需求针对的是本人公司遇到的一些问题。当然还有很多，大家根据自己实际使用。

代码操作：

基础知识

• vue-cli 提供了一个pages字段作为页面的配置（vue.config.js）。https://cli.vuejs.org/zh/config/#pages
  

平常我们vue-cli 搭建的项目都是单页面应用，pages的默认配置就如上图，而我们如果需要配置多页面就直接按照上面的配置注释来提供入口文件和出口页面即可。如下：

• /vue.config.js

module.exports = {
   
   
  pages: {
   
   
    index: {
   
   
      entry: 'src/main.js',
      template: 'public/index.html',
      filename: 'index.html',
      title: 'Index Page',
    },
    page2: {
   
   
      entry: 'src/page2_main.js',
      filename: 'page2.html',
      title: 'page2Page',
    },
  }
}

• src/page2_main.js

import Vue from 'vue';
import App from 'src/page2_app.vue';
Vue.config.productionTip = false;
new Vue({
   
    render: h => h(App) }).$mount('#page2'); 

• src/page2_app.vue

<template>
    <div id="page2">
		页面2
    </div>
</template>

<script>
    export default {
   
   
      
    }
</script>

• 运行，和以前一样：npm run serve
  打开 localhost:8080/page.html 就可以看到page2的效果。
• 打包 npm run build
  会在包里打出一个 page2.html

总结：就这么简单，如果你只需要两个页面，那么上面的完全可以满足你的需求（以上代码需要注意路径的问题。）
不过，当你需要很多个页面的时候，以上配置就显得有点麻烦了，有很多操作都需要重复，下面的干货就登场了。

自动化生成多页面配置和入口文件。

思路：多页面需要的两个条件：1、pages字段的配置json 2、入口文件（例：main.js)
写一个函数用node.js的库自动化实现此两个条件即可。

• vue.config.js

const glob = require('glob');
const fs