前言: 本文基于vue 2.5.2, webpack 3.6.0（配置多页面原理类似，实现方法各有千秋，可根据需要进行定制化）
vue 是单页面应用。但是在做大型项目时，单页面往往无法满足我们的需求，因此需要配置多页面应用。
1. 新建 vue 项目
vue init webpack vue_multiple_test cd vue_multiple_test npm install
2. 安装 glob
npm i glob --save-dev
glob 模块用于查找符合要求的文件
3. 目标结构目录
. ├── README.md ├── build │ ├── build.js │ ├── check-versions.js │ ├── logo.png │ ├── utils.js │ ├── vue-loader.conf.js │ ├── webpack.base.conf.js │ ├── webpack.dev.conf.js │ └── webpack.prod.conf.js ├── config │ ├── dev.env.js │ ├── index.js │ └── prod.env.js ├── generatePage.sh ├── index.html ├── package-lock.json ├── package.json ├── src │ ├── assets │ │ └── logo.png │ └── pages │ ├── page1 │ │ ├── App.vue │ │ ├── index.html │ │ └── index.js │ └── page2 │ ├── App.vue │ ├── index.html │ └── index.js └── static
其中，pages文件夹用于放置页面。 page1 和 page2用于分别放置不同页面，且默认均包含三个文档: App.vue, index.html, index.js, 这样在多人协作时，可以更为清晰地明确每个文件的含义。除此之外，此文件也可配置路由。
4. utils 增加下述代码:
const glob = require('glob')
const PAGE_PATH = path.resolve(__dirname, '../src/pages')
const HtmlWebpackPlugin = require('html-webpack-plugin')
其中：PAGE_PATH 为所有页面所在的文件夹路径，指向 pages文件夹。
exports.entries = function () {
var entryFiles = glob.sync(PAGE_PATH + '
var entryPath = path.dirname(filePath)
var filename = entryPath.substring(entryPath.lastIndexOf('/') + 1)
map[filename] = filePath
})
return map
}
该方法用于生成多页面的入口对象，例如本例，获得的入口对象如下：
{
page1: '/Users/work/learn/vue/vue_multiple_test/src/pages/page1/index.js',
page2: '/Users/work/learn/vue/vue_multiple_test/src/pages/page2/index.js',
}
其中：key 为当前页面的文件夹名称，
```value``` 为当前页面的入口文件名称
exports.htmlPlugin = function () {
let entryHtml = glob.sync(PAGE_PATH + '
new Vue({
el: '#app',
components: { App },
template: ''
})" > index.js
之后在项目路径下输入下述命令:
bash generatePage.sh page4
即可在pages文件夹下生成一个名为page4的新页面。还可以通过自定义shell脚本的内容写入路由等，以实现定制需求。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持考高分网。
