详解vue-cli多页面工程实践第1/2页
时间:2019-03-31
本文章向大家介绍详解vue-cli多页面工程实践第1/2页,主要包括详解vue-cli多页面工程实践第1/2页使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
本文介绍了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
- Android4.0 声卡配置-高通msm8916移植
- PHP安全:session劫持的防御
- 函数式非凡的抽象能力
- 设备树的interrupt
- gitignore文件的作用
- 《Redis设计与实现》读书笔记(十八) ——Redis客户端属性设计与原理
- 使用Python Pandas处理亿级数据
- PHP函数
- Spray中的Authentication和JMeter测试
- 《Redis设计与实现》读书笔记(二十一) ——Redis服务器定时函数serverCron详解
- Spark SQL访问Postgresql
- sysfs_create_group创建sysfs接口
- apache服务器配置
- Android i2c-tools移植
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- Codeforces Round #613 (Div. 2)A. Mezo Playing Zoma
- PAT (Advanced Level) Practice 1096 Consecutive Factors (20 分)
- Codeforces Round #613 (Div. 2)B. Just Eat It!
- java线程池(六):ForkJoinPool源码分析之二(WorkQueue源码)
- Codeforces Round #605 (Div. 3) D. Remove One Element
- 用python爬虫,pyinstaller写一个属于自己的彩虹屁生成器!
- 2020牛客寒假算法基础集训营4 C 子段乘积
- Callable and Future in Java(java中的Callable和Future)
- Java类 初步学习
- Gephi可视化拓扑图简单实战
- python连接到SQList数据库以及简单操作
- 在markdown编辑器使用html绘制表格
- 循环不变式:算法中基础概念的明晰
- Codeforces Round #615 (Div. 3)B. Collecting Packages
- 七大设计原则、单一职责原则