vue-cli webpack 多页面应用配置

vue.js是一套构建用户界面的前端框架

vue-cli是vue官方的一个命令行工具，可用于快速搭建大型单页应用

在现实项目中，大部分项目都是多页的，在这里主要记录一下我工作中是如何配置将单页应用改为多页应用

1.安装vue-cli: npm install -g vue-cli

2.查看可使用的templates:npm list

3.初始化模板：npm init webpack < project name>

4.根据提示安装所需要的插件

5.建立项目后进入项目目录：npm install

下边就是相应的步骤

1.查看目录结构

2..对目录结构进行调整

进入src文件夹，新建文件夹，取名为pages用于存放页面文件，在pages里新建一个文件夹中Index用于存放首页，然后把下图红框中的文件（夹）都接进Index文件夹中，还有项目目录下的Index.html也拉进去，如图所示

3.将main.js改为index.js

4.可以在pages下再增加home文件夹，里边放的是另一个页面，如图所示

这个时候项目目录结构已经调整完了，可以对相应的配置文件进行修改了

5.找到build文件夹下的utils文件增加两个方法

//多页面配置
// glob是webpack安装时依赖的一个第三方模块，还模块允许你使用 *等符号, 例如lib/*.js就是获取lib文件夹下的所有js后缀名的文件
var glob = require('glob')
var HtmlWebpackPlugin = require('html-webpack-plugin')
// 取得相应的页面路径，因为之前的配置，所以是src文件夹下的pages文件夹
var PAGE_PATH = path.resolve(__dirname, '../src/modules')
// 用于做相应的merge处理
var merge = require('webpack-merge')

//多入口配置
// 通过glob模块读取pages文件夹下的所有对应文件夹下的js后缀文件，如果该文件存在
// 那么就作为入口处理
exports.entries = function () {
  var entryFiles = glob.sync(PAGE_PATH + '/*/*.js')
  var map = {}
  entryFiles.forEach((filePath) => {
    var filename = filePath.substring(filePath.lastIndexOf('\/') + 1, filePath.lastIndexOf('.'))

    //babel-polyfill是处理axios在ie中的兼容问题
    map[filename] = ["babel-polyfill", filePath]
  })
  return map
}

//多页面输出配置
// 与上面的多页面入口配置相同，读取pages文件夹下的对应的html后缀文件，然后放入数组中
exports.htmlPlugin = function () {
  let entryHtml = glob.sync(PAGE_PATH + '/*/*.html')
  let arr = []
  entryHtml.forEach((filePath) => {
    let filename = filePath.substring(filePath.lastIndexOf('\/') + 1, filePath.lastIndexOf('.'))
    let conf = {
      // 模板来源
      template: filePath,
      // 文件名称
      filename: filename + '.html',
      // 页面模板需要加对应的js脚本，如果不加这行则每个页面都会引入所有的js脚本
      chunks: ['manifest', 'vendor', filename],
      inject: true
    }
    arr.push(new HtmlWebpackPlugin(conf))
  })
  return arr
}