当前位置：首页 > 资讯 > 技术文档

详解vue-cli多页面工程实践第1/2页

时间：2021-09-13 05:36 编辑：来源：阅读：
扫一扫，手机访问

摘要：详解vue-cli多页面工程实践第1/2页

本文介绍了vue-cli多页面工程实践，分享给大家，具体如下： [b]src目录结构[/b] 因为是自定义的设置，src下的目录结构需要固定，约定大于配置嘛。 src目录结构：

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

[b]build中的配置[/b] 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
当前1/2页 [b]1[/b][url=http://www.1sucai.cn/article/122436_2.htm]2[/url][url=http://www.1sucai.cn/article/122436_2.htm]下一页[/url][url=http://www.1sucai.cn/article/122436_all.htm]阅读全文[/url]

[h3]您可能感兴趣的文章:[/h3][list][*][url=http://www.1sucai.cn/article/128612.htm]详解如何将 Vue-cli 改造成支持多页面的 history 模式[/url][/*][*][url=http://www.1sucai.cn/article/124124.htm]Vue-cli创建项目从单页面到多页面的方法[/url][/*][*][url=http://www.1sucai.cn/article/118698.htm]vue-cli单页应用改成多页应用配置详解[/url][/*][*][url=http://www.1sucai.cn/article/118611.htm]详解vue-cli + webpack 多页面实例配置优化方法[/url][/*][*][url=http://www.1sucai.cn/article/112130.htm]详解vue-cli + webpack 多页面实例应用[/url][/*][*][url=http://www.1sucai.cn/article/130738.htm]详解如何使用 vue-cli 开发多页应用[/url][/*][/list]

[b]Tags：[/b][url=http://common.jb51.net/tag/vue/1.htm]vue[/url] [url=http://common.jb51.net/tag/cli/1.htm]cli[/url] [url=http://common.jb51.net/tag/%E5%A4%9A%E9%A1%B5%E9%9D%A2/1.htm]多页面[/url]

[h1]相关文章[/h1] [list][*]2016-10-10[url=http://www.1sucai.cn/article/95030.htm]vue.js表格分页示例[/url][/*][*]2017-03-03[url=http://www.1sucai.cn/article/107920.htm]vue.js利用Object.defineProperty实现双向绑定[/url][/*][*]2017-07-07[url=http://www.1sucai.cn/article/117799.htm]详解vue-router和vue-cli以及组件之间的传值[/url][/*][*]2017-04-04[url=http://www.1sucai.cn/article/111644.htm]Vue.js实现模拟微信朋友圈开发demo[/url][/*][*]2017-09-09[url=http://www.1sucai.cn/article/124969.htm]iview给radio按钮组件加点击事件的实例[/url][/*][*]2017-09-09[url=http://www.1sucai.cn/article/123645.htm]Vue2.0基于vue-cli+webpack父子组件通信(实例讲解)[/url][/*][*]2017-10-10[url=http://www.1sucai.cn/article/126672.htm]vue+vuecli+webpack中使用mockjs模拟后端数据的示例[/url][/*][*]2017-04-04[url=http://www.1sucai.cn/article/111103.htm]Vue组件tree实现树形菜单[/url][/*][*]2016-12-12[url=http://www.1sucai.cn/article/100777.htm]Vue.js 递归组件实现树形菜单（实例分享）[/url][/*][*]2017-09-09[url=http://www.1sucai.cn/article/123459.htm]vue-resouce设置请求头的三种方法[/url][/*][/list]

[url=http://www.1sucai.cn/article/122436.htm#comments][/url]

[h1]最新评论[/h1]

全部评论(0)

上一篇：详解vue-cli + webpack 多页面实例配置优化方法
下一篇：详解vue-cli + webpack 多页面实例应用

资讯排行榜
更多>>