vue 多页面应用例子_vue-cli webpack多Html页面的配置(附框架vue-webpack-multipage实例)...

产生原因：

目前使用Vue的Web应用越来越多，包括很多手机App都使用Vue来开发前端。但是使用官方的vue-cli webpack仅仅是单页面，一个大一点的项目一个页面往往是不够的。那么vue-cli能不能支持多Html页面呢？答案是可以的，那就需要我们去改动一下webpack的配置。

简介：

我把它取了个名字叫做vue-webpack-multipage，顾名思义：vue基于webpack的多页面框架。我同时会给大家讲如何基于官方的vue-cli webpack的demo上改动，也会把我修改过后的demo上传到git共享给大家(但是不保证模块是最新的，所以大家最好跟着教程自己配置一下)。在之前呢，我参考了其他大佬的一些方法，然后自己总结了一下，并进行了优化。可以支持多级目录，至于多少级呢，这个是不限制的，所以个人认为还是比较智能的。本教程涉及到vue-cli原有支持需要你们自己查阅哦。

配置教程：

前置条件：你已经熟悉了vue-cli

1.创建项目

//就是你使用官方vue-cli的用法

vue init webpack 项目名

2.添加多页面帮助工具：这是封装的各种多页面支持的方法，我命名为multipage-helper.js，放在项目的build文件夹下

/**

* 多页面支持

* @File:

* @Description: 多页面支持

* @author qingyi xuelongqy@foxmail.com

* @date 2017/6/15 10:16

* @version V1.0*/

var path = require('path')var fs = require("fs")var HtmlWebpackPlugin = require('html-webpack-plugin')var moduleList //缓存多页面模块列表

var moduleRootPath = './src/module' //模块根目录(这个可以根据自己的需求命名)

/**

* 获取js入口数组*/exports.getEntries= functiongetEntries(){//缓存js入口数组

var entries ={}//初始化模块列表

this.getModuleList()//变量模块列表

moduleList.forEach(function(module) {if (module.moduleID != "" && module.moduleJS != ""){

entries[module.moduleID]=module.moduleJS

}

})

console.log("*********************************** entries ********************