vue-cli3多页面配置

使用vue-cli3的多页面项目，项目结构如下

即所有的项目都放置在src/modules里
简单的配置成下面这样

vue.config.js

const entryConfig = require('./build/entry-config'); // 生成入口文件对象
const prodConfig = require('./build/webpack.prod.conf'); // 生产配置
const devConfig = require('./build/webpack.dev.config');// 开发模式配置
const productionMode = process.env.NODE_ENV === 'production';

module.exports = {
    pages: entryConfig.getEntries(),
    assetsDir: 'static',
    productionSourceMap: false,
    configureWebpack: config => {
        if (productionMode) {
            config.mode = 'production';
            return prodConfig;
        } else {
            return devConfig;
        }
    }
};

entry-config.js

const fs = require('fs');
var moduleRootPath = 'src/modules'; //模块根目录(这个可以根据自己的需求命名)
let moduleInfo = null;

exports.getEntries = function getEntries() {
    //初始化模块列表
    this.getModuleInfo();
    console.log(
        '*********************************** entries ***********************************'
    );
    console.log(JSON.stringify(moduleInfo));
    return moduleInfo;
};
exports.getModuleInfo = function getModuleInfo() {
    //判断是否为空，不为空则直接返回
    if (moduleInfo) {
        return moduleInfo;
    } else {
        //为空则读取列表
        moduleInfo = {};
        readDirSync(moduleRootPath, '', true);
        return moduleInfo;
    }
};
/**
 * 深度遍历目录，并整理多页面模块
 * @param path 需要变量的路径
 * @param moduleName 模块名称
 */
function readDirSync(path, moduleName, nextLevel) {
    //缓存模块对象
    var moduleObj = {
        entry: '',
        template: '',
        filename: ''
    };
    //获取当前模块ID
    var moduleID = path.replace(moduleRootPath + '/', '');
    if (path == moduleRootPath) {
        moduleID = '';
    }
    //获取目录下所有文件及文件夹
    var pa = fs.readdirSync(path);
    pa.forEach(function(ele, index) {
        var info = fs.statSync(path + '/' + ele);
        if (info.isDirectory()) {
            // console.log("dir: "+ele)
            nextLevel && readDirSync(path + '/' + ele, ele, false);
        } else {
            //判断当前模块的html是否存在
            if ('index.html' == ele) {
                moduleObj.template = path + '/' + ele;
                moduleObj.filename = moduleID + '/' + 'index.html';
            }
            //判断当前模块的js是否存在
            if ('index.js' == ele) {
                moduleObj.entry = path + '/' + ele;
            }
            // console.log("file: "+ele)
        }
    });
    //判断模块是否真实(可能只是个分级目录)
    if (
        (moduleObj.moduleID != '' && moduleObj.moduleHTML != '') ||
        (moduleObj.moduleID != '' && moduleObj.moduleJS != '')
    ) {
        if (moduleID) {
            moduleInfo[moduleID] = moduleObj;
        }
    }
}
// exports.getEntries();

开发模式下有个坑，项目放置在static里不被webpack管理的静态资源，在开发模式一直没引用到资源。
解决方法：把整个static文件夹拖进public文件夹里。