这篇文章主要介绍vue-cli多页面工程的示例分析，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！
具体如下：
src目录结构
因为是自定义的设置，src下的目录结构需要固定，约定大于配置嘛。
src目录结构：
计算
安全
数据库
网络和加速
企业服务
src/
components/
modules/ # 多页面
index/ # index 单页面
index.html
main.js # 入口文件
page1/
index.html
main.js
group/
page2/
index.html
main.jsbuild中的配置
utils.js 增加:
// match files
let glob = require('glob');
/**
* globPath 获取泛路径下的特定文件
*/
exports.getEntities = function (path) {
let entities = {};
glob.sync(path).forEach(function (entity) {
let moduleName = entity.split('/').slice(-2,-1);
entities[moduleName] = entity
});
// eg: { main: './src/module/index/main.js', test: './src/module/group/test/main.js' }
return entities;
};webpack.base.conf.js 修改输入和输出:
module.exports = {
// 遍历获取入口文件
entry: utils.getEntities("./src/modules/**/main.js"),
...
plugins:[]
};
/***
* 生成 <module>/index.html
*/
let utils = require('./utils')
let pages = utils.getEntities("./src/modules/**/index.html");
for (let page in pages) {
let filename = "index.html";
if(page!=='index'){
filename = page+"/index.html";
}
module.exports.plugins.push(new HtmlWebpackPlugin({
filename: filename,
template: pages12下一页阅读全文以上是“vue-cli多页面工程的示例分析”这篇文章的所有内容，感谢各位的阅读！希望分享的内容对大家有帮助，更多相关知识，欢迎关注亿速云行业资讯频道！
亿速云「云服务器」，即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘，价格低至29元/月。点击查看>>
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
