详解Vue CLI3 多页应用实践和源码设计


Posted in Javascript onAugust 30, 2018

 对于一个网站来说,即需要h5页面也同时需要web页面,而h5和web页面共用很多代码,不做响应式,只能拆分两个页面来写,一个h5,一个web.用vue cli3怎么配置h5与web的应用呢?

解决思路:

首先,需要产生多页面应用,用webpack配置成多页面应用,一个h5一个web,这个网上已经有很多教程了,下面会再整理一次,接着把所有公共的代码提到多页面目录外面.

我们看一下官网给的 multi-page 的配置:需要在 vue.config.js 配置 pages,示例如下:

pages: {
 index: {
  // page 的入口
  entry: 'src/index/main.js',
  // 模板来源
  template: 'public/index.html',
  // 在 dist/index.html 的输出
  filename: 'index.html',
  // 当使用 title 选项时,
  // template 中的 title 标签需要是 <title><%= htmlWebpackPlugin.options.title %></title>
  title: 'Index Page',
  // 在这个页面中包含的块,默认情况下会包含
  // 提取出来的通用 chunk 和 vendor chunk。
  chunks: ['chunk-vendors', 'chunk-common', 'index']
 },
 // 当使用只有入口的字符串格式时,
 // 模板会被推导为 `public/subpage.html`
 // 并且如果找不到的话,就回退到 `public/index.html`。
 // 输出文件名会被推导为 `subpage.html`。
 subpage: 'src/subpage/main.js'
 }

每一个页面中就是一个对象,包含了如下配置:

  • entry 入口文件的路径
  • template 模板文件的路径
  • filename 编译之后的 html 文件名
  • title html 中的 title
  • chunks 打包的 chunk 文件,数组格式,包含入口文件

首先,我们需要设计一下 src 目录下面放置 multi-page 的文件:

看了很多多页项目,有 2 个方案:

  • 一种叫 pages 文件夹
  • 一种叫 views 或者其他名字的文件夹

大家自行选择或者定义就好了,这里我们选 pages

我们再看一下里面的文件:

  • 入口文件:文件名可以叫 main.js 或者 index.js
  • 模板文件:可以用统一的 'public/index.html',或者目录内放置一个自己的,取名 index.html
  • title:可以从一个文件里面取
src
 pages
 page1
  index.html
  main.js
  App.vue
 page2
  index.html
  main.js
  App.vue

下面就是通过函数来生成 pages 的配置:

第一步:找到入口文件

可以用 glob

const glob = require('glob')

pages 目录的位置,可以用相对路径,也可以用绝对路径:

const path = require('path')
const PAGES_PATH = path.resolve(__dirname, './src/pages')

定义一个 pages 对象:

const pages = {}
glob.sync(PAGES_PATH + '/*/main.js').forEach(filepath => {
 // ...
})

这里就是去设置对应几个 key 了,很多项目基本多是通过

/ 分隔符来对字符串进行数组话,然后简单地获取

但是熟悉 node.js path 模块的会如下处理:

const pageName = path.basename(path.dirname(filepath))

往 pages 里面循环设置:

pages[pageName] = {
 entry: filepath,
 filename: `${pageName}.html`,
 chunks: ['chunk-vendors', 'chunk-common', pageName]
 }

关于 template 稍微复杂一点,我们需要做判断,如果存在就用自定义的,如果不存在就用通用的

const templatePath = path.dirname(filepath) + '/index.html'

然后通过 fs.existsSync 会判断自定义文件是否存在:

if (!fs.existsSync(templatePath)) {
 // 入口如果不配置直接使用
 templatePath = 'public/index.html'
 }

当然后面我们分享了源码之后,你就会发现你做了无用功

下面我们看一下源码实现部分:

每个版本的 cli-service 多有微小的改动

cli-service/lib/config/app.js 文件

定义了一个变量 multiPageConfig 获取 vue.config.js 取出来的 pages:

const multiPageConfig = options.pages

清空一次 entry

webpackConfig.entryPoints.clear()

通过 Object.keys 获取 keys,然后 forEach 循环

const pages = Object.keys(multiPageConfig)
pages.forEach(name => {
})

循环内部:

先定义要用的变量,从 multiPageConfig[name] 的每一个对象取:

const {
   title,
   entry,
   template = `public/${name}.html`,
   filename = `${name}.html`,
   chunks
  } = normalizePageConfig(multiPageConfig[name])

normalizePageConfig 函数如下:

处理 subpage: 'src/subpage/main.js' 的情况

const normalizePageConfig = c => typeof c === 'string' ? { entry: c } : c

设置 entry

webpackConfig.entry(name).add(api.resolve(entry))

hasDedicatedTemplate 是判断

用户传递的多页配置自定义模板路径是否存在:

const fs = require('fs')
const hasDedicatedTemplate = fs.existsSync(api.resolve(template))

templatePath 的处理细节:

htmlPath 路径是:

/Users/*/public/index.html

const htmlPath = api.resolve('public/index.html')

defaultHtmlPath 路径是:

/Users/*/node_modules/@vue/cli-service/lib/config/index-default.html

const defaultHtmlPath = path.resolve(__dirname, 'index-default.html')

如果:

1、用户自定义的模板存在就直接给 templatePath
2、如果不存在,先取 public/index.html,再不行就取 node_modules 里面的

const templatePath = hasDedicatedTemplate
   ? template
   : fs.existsSync(htmlPath)
   ? htmlPath
   : defaultHtmlPath

最终通过 html-webpack-plugin 插件来生成指定名字的 html 文件到指定目录:

1、指定目录:

由 vue.config.js 中的 outputDir 来决定

const outputDir = api.resolve(options.outputDir)

2、生成 webpack config 关于 html-webpack-plugin 的部分:

const HTMLPlugin = require('html-webpack-plugin')
webpackConfig
   .plugin(`html-${name}`)
   .use(HTMLPlugin, [pageHtmlOptions])

pageHtmlOptions 的处理细节:

传递给 html-webpack-plugin 插件的参数,这里默认会设置 chunks 的,所以上面实战中配置也是无用功

const pageHtmlOptions = Object.assign({}, htmlOptions, {
   chunks: chunks || ['chunk-vendors', 'chunk-common', name],
   template: templatePath,
   filename: ensureRelative(outputDir, filename),
   title
  })

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
可以把编码转换成 gb2312编码lib.UTF8toGB2312.js
Aug 21 Javascript
JavaScript 常用函数
Dec 30 Javascript
ASP.NET jQuery 实例12 通过使用jQuery validation插件简单实现用户注册页面验证功能
Feb 03 Javascript
js动态往表格的td中添加图片并注册事件
Jun 12 Javascript
JavaScript各类型的关系图解
Oct 16 Javascript
javascript中去除数组重复元素的实现方法【实例】
Apr 12 Javascript
Angularjs 实现移动端在线测评效果(推荐)
Apr 05 Javascript
详解Vue-Cli 异步加载数据的一些注意点
Aug 12 Javascript
vue中各选项及钩子函数执行顺序详解
Aug 25 Javascript
又拍云 Node.js 实现文件上传、删除功能
Oct 28 Javascript
浅谈vue中$bus的使用和涉及到的问题
Jul 28 Javascript
Vue基于localStorage存储信息代码实例
Nov 16 Javascript
小程序图片长按识别功能的实现方法
Aug 30 #Javascript
解决vue中监听input只能输入数字及英文或者其他情况的问题
Aug 30 #Javascript
解决Js先触发失去焦点事件再执行点击事件的问题
Aug 30 #Javascript
微信小程序之判断页面滚动方向的示例代码
Aug 30 #Javascript
解决vue js IOS H5focus无法自动弹出键盘的问题
Aug 30 #Javascript
在Vue methods中调用filters里的过滤器实例
Aug 30 #Javascript
vue 根据数组中某一项的值进行排序的方法
Aug 30 #Javascript
You might like
PHP 增加了对 .ZIP 文件的读取功能
2006/10/09 PHP
php文件夹的创建与删除方法
2015/01/24 PHP
php获取网站百度快照日期的方法
2015/07/29 PHP
PHP完全二叉树定义与实现方法示例
2017/10/09 PHP
将HTML自动转为JS代码
2006/06/26 Javascript
JavaScript中的History历史对象
2008/01/16 Javascript
javascript 尚未实现错误解决办法
2008/11/27 Javascript
Mootools 1.2教程(21)——类(二)
2009/09/15 Javascript
浏览器常用高宽的jquery插件
2011/02/24 Javascript
jQuery 1.5 源码解读 面向中高阶JSER
2011/04/05 Javascript
6款经典实用的jQuery小插件及源码(对话框/提示工具等等)
2013/02/04 Javascript
javascript列表框操作函数集合汇总
2013/11/28 Javascript
返回上一页并自动刷新的JavaScript代码
2014/02/19 Javascript
IE下通过a实现location.href 获取referer的值
2014/09/04 Javascript
浏览器兼容性问题大汇总
2015/12/17 Javascript
js实现搜索框关键字智能匹配代码
2020/03/26 Javascript
vue2.0实现分页组件的实例代码
2017/06/22 Javascript
深入浅析vue-cli@3.0 使用及配置说明
2019/05/08 Javascript
react结合bootstrap实现评论功能
2020/05/30 Javascript
js实现随机点名器精简版
2020/06/29 Javascript
[01:18:31]DOTA2-DPC中国联赛定级赛 LBZS vs Magma BO3第一场 1月10日
2021/03/11 DOTA
Python中利用Scipy包的SIFT方法进行图片识别的实例教程
2016/06/03 Python
python 字符串转列表 list 出现\ufeff的解决方法
2017/06/22 Python
python发送邮件实例分享
2017/07/28 Python
Python3多线程爬虫实例讲解代码
2018/01/05 Python
Flask框架 CSRF 保护实现方法详解
2019/10/30 Python
python程序需要编译吗
2020/06/19 Python
python UIAutomator2使用超详细教程
2021/02/19 Python
怎样在程序里获得一个空指针
2015/01/24 面试题
文言文形式的学生求职信
2013/12/03 职场文书
办加油卡单位介绍信
2014/01/09 职场文书
公司经理聘任书
2014/03/29 职场文书
教研活动总结
2014/04/28 职场文书
生物学专业求职信
2014/07/23 职场文书
解析:创业计划书和商业计划书二者之间到底有什么区别
2019/08/14 职场文书
Python函数中apply、map、applymap的区别
2021/11/27 Python