vue cli多个html,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文件夹里。