DDR爱好者之家

详解vue-cli多页面工程实践第1/2页
站长资源 2024/11/27 佚名
54 1538
DDR爱好者之家 Design By 杰米

本文介绍了vue-cli多页面工程实践，分享给大家，具体如下：

src目录结构

因为是自定义的设置，src下的目录结构需要固定，约定大于配置嘛。

src目录结构：

src/
 components/
 modules/   # 多页面
  index/   # index 单页面
   index.html
   main.js # 入口文件
  page1/
   index.html
   main.js
  group/
   page2/
    index.html
    main.js

build中的配置

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: pages
                            12下一页阅读全文
DDR爱好者之家 Design By 杰米
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
DDR爱好者之家 Design By 杰米
ddrfans.com DDR爱好者之家
8,675无损音乐
1,324高清电影
213破解软件
70,141收录资讯

更新日志

友情链接

杰晶网络 DDR爱好者之家 南强小屋 黑松山资源网 白云城资源网
DDR爱好者之家 Design By 杰米