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} 6.修改build/weback.base.conf.js的入口配置
将
改为
7.修改build/webpack.dev.conf.js(开发环境)和build/webpack.prod.conf.js(生产环境)的多页面配置
修改build/webpack.dev.conf.js
修改build/webpack.prod.conf.js
在后边加上
到这里对页面应用的配置就完成了
然后npm run dev 打开开发环境，在路径中输入home.html如果能进入home 页面，那么多页面应用的配置就成功了