vue.js多页面开发环境搭建

利用 vue-cli 搭建的项目大都是单页面应用项目，对于简单的项目，单页面就能知足要求。但对于有多个子项目的应用，若是建立多个单页面，显示有点重复，特别是 node_modules 会有多份相同的。若是所有放到单页面项目下，又显得有点乱，这时候经过改造 vue-cli 搭建的项目为多页面，就是一个比较好的解决方法。

如何改造单页面 vue.js 项目为多页面项目？下面是此次改造的具体过程。

1、建立单页面 vue.js 项目

这里直接使用官方提供的脚手架 vue-cli3 建立，具体的过程请参考 vue-cli3.0 升级记录

2、多页面配置

一、添加配置文件

在项目根路径下( 与 package.json 同目录 )添加 vue.config.js，内容以下：

module.exports = {
  pages: {
    index: {
      // 入口js的路径
      entry: './src/main',
      // 页面模板路径
      template: './src/public/index.html'
    }
  }
}
复制代码

上面的配置其实就是 vue-cli 创建项目的默认配置，若是增长页面，在 pages 节点下添加配置便可。但这种方式，每次增长一个新页面，就须要手动添加节点，这种重复的事情显然不智能。下面继续改造。

二、调整项目结构

要自动化，那么就须要按定一种规则把页面组织下。如把全部路由页面都放到 src/pages 目录下，改造后的结构以下：

三、编写自动配置文件

在项目根路径下( 与 package.json 同目录 )添加 vue.util.js，内容以下：

const path = require('path')
const glob = require('glob')
const START_PATH = '/src/pages/'
const PAGE_PATH = path.resolve(__dirname, '.' + START_PATH)

exports.pages = function () {
  var entryFiles = glob.sync(PAGE_PATH + '/**/*.html')
  var obj = {}
  entryFiles.forEach((filePath) => {
    var dirPath = filePath.substring(0, filePath.lastIndexOf('/'))
    var dirName = dirPath.substring(dirPath.lastIndexOf('/') + 1)
    var filename = filePath.substring(filePath.lastIndexOf(START_PATH) + START_PATH.length, filePath.lastIndexOf('/'))
    if (filename.endsWith(dirName)) {
      obj[filename] = {
        entry: filePath.substring(0, filePath.lastIndexOf('.html')) + '.js',
        template: filePath.substring(0, filePath.lastIndexOf('.html')) + '.html'
      }
    }
  })
  return obj
}
复制代码

在 vue.config.js 使用上面的配置

const utils = require('./vue.util')

module.exports = {
  pages: utils.pages()
}
复制代码

3、测试下

yarn dev
复制代码

浏览器输入：

http://localhost:8080/index.html 和 http://localhost:8080/index2.html

OK，多页面配置完成