本文共 4742 字，大约阅读时间需要 15 分钟。

前言: 本文基于vue 2.5.2, webpack 3.6.0（配置多页面原理类似，实现方法各有千秋，可根据需要进行定制化）

vue 是单页面应用。但是在做大型项目时，单页面往往无法满足我们的需求，因此需要配置多页面应用。

1. 新建 vue 项目

vue init webpack vue_multiple_testcd vue_multiple_testnpm 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 () {  /*用于匹配 pages 下一级文件夹中的 index.js 文件 */  var entryFiles = glob.sync(PAGE_PATH + '/*/index.js')  var map = {}  entryFiles.forEach((filePath) => {    /* 下述两句代码用于取出 pages 下一级文件夹的名称 */    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 + '/*/index.html')  let arr = []  entryHtml.forEach((filePath) => {    var entryPath = path.dirname(filePath)    var filename = entryPath.substring(entryPath.lastIndexOf('\/') + 1)    let conf = {      template: filePath,      filename: filename + `/index.html`,      chunks: ['manifest', 'vendor', filename],      inject: true    }    if (process.env.NODE_ENV === 'production') {      let productionConfig = {        minify: {         removeComments: true,     // 移除注释         collapseWhitespace: true,   // 删除空白符和换行符         removeAttributeQuotes: true  // 移除属性引号         },        chunksSortMode: 'dependency'  // 对引入的chunk模块进行排序      }      conf = {...conf, ...productionConfig} //合并基础配置和生产环境专属配置    }    arr.push(new HtmlWebpackPlugin(conf))  })  return arr}

5. webpack.base.conf.js修改入口如下：

entry: utils.entries()

6. webpack.dev.conf.js 删除下述代码

new HtmlWebpackPlugin({  filename: 'index.html',  template: 'index.html',  inject: true})

7. webpack.prod.conf.js 删除下述代码

new HtmlWebpackPlugin({  filename: config.build.index,  template: 'index.html',  inject: true,  minify: {    removeComments: true,    collapseWhitespace: true,    removeAttributeQuotes: true  },  chunksSortMode: 'dependency'})

8. 构建结果

【dev】开发环境下，执行 npm run dev 访问:  http://localhost:8080/page1/index.html http://localhost:8080/page2/index.html  即为访问不同的页面  【production】生产环境下，执行 npm run build, 生成的文件目录如下所示: │  ├── dist│  ├── page1│  │  └── index.html│  ├── page2│  │  └── index.html│  └── static│    ├── css│    │  ├── page1.86a4513a3e04c0dcb73e6d6aea4580e4.css│    │  ├── page1.86a4513a3e04c0dcb73e6d6aea4580e4.css.map│    │  ├── page2.86a4513a3e04c0dcb73e6d6aea4580e4.css│    │  └── page2.86a4513a3e04c0dcb73e6d6aea4580e4.css.map│    └── js│      ├── manifest.0c1cd46d93b12dcd0191.js│      ├── manifest.0c1cd46d93b12dcd0191.js.map│      ├── page1.e2997955f3b0f2090b7a.js│      ├── page1.e2997955f3b0f2090b7a.js.map│      ├── page2.4d41f3b684a56847f057.js│      ├── page2.4d41f3b684a56847f057.js.map│      ├── vendor.bb335a033c3b9e5d296a.js│      └── vendor.bb335a033c3b9e5d296a.js.map

9.【懒人福利】使用shell脚本自动构建基础页面

#!/bin/bash# 打开 pages 文件夹，并创建文件cd src/pagesfor file in $(ls)do if [ $file == $1 ];then   echo $1' 文件已存在, 请使用其他名字'   exit fidonemkdir $1cd $1# 生成 index.htmlecho "" > index.htmlecho '    
     
         
   
  
    ' > index.html # 生成 App.vueecho "" > App.vueecho '
     ' > App.vue # 生成 index.jsecho "" > index.jsecho "import Vue from 'vue'import App from './App' Vue.config.productionTip = false /* eslint-disable no-new */new Vue({ el: '#app', components: { App }, template: '
   '})" > index.js

之后在项目路径下输入下述命令:

bash generatePage.sh page4

即可在pages文件夹下生成一个名为page4的新页面。还可以通过自定义shell脚本的内容写入路由等，以实现定制需求。

为了帮助大家让学习变得轻松、高效，给大家免费分享一大批资料，帮助大家在成为全栈工程师，乃至架构师的路上披荆斩棘。在这里给大家推荐一个前端全栈学习交流圈：.欢迎大家进群交流讨论，学习交流，共同进步。

当真正开始学习的时候难免不知道从哪入手，导致效率低下影响继续学习的信心。

但最重要的是不知道哪些技术需要重点掌握，学习时频繁踩坑，最终浪费大量时间，所以有有效资源还是很有必要的。

最后祝福所有遇到瓶疾且不知道怎么办的前端程序员们，祝福大家在往后的工作与面试中一切顺利。

转载地址：http://fgyyn.baihongyu.com/