详解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 相关文章推荐
再次更新!MSClass (Class Of Marquee Scroll通用不间断滚动JS封装类 Ver 1.6)
Feb 05 Javascript
JavaScript高级程序设计(第3版)学习笔记3 js简单数据类型
Oct 11 Javascript
用jquery模仿的a的title属性(兼容ie6/7)
Jan 21 Javascript
解决jquery中美元符号命名冲突问题
Jan 08 Javascript
JS基于cookie实现来宾统计记录访客信息的方法
Aug 04 Javascript
Kindeditor在线文本编辑器如何过滤HTML
Apr 14 Javascript
基于Angularjs实现分页功能
May 30 Javascript
vue实现ToDoList简单实例
Feb 07 Javascript
angularjs实现过滤并替换关键字小功能
Sep 19 Javascript
Node.JS段点续传:Nginx配置文件分段下载功能的实现方法
Mar 12 Javascript
微信小程序下拉框搜索功能的实现方法
Jul 31 Javascript
vue使用better-scroll实现滑动以及左右联动
Jun 30 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相当简单的分页类
2008/10/02 PHP
php 执行系统命令的方法
2009/07/07 PHP
PHP独立Session数据库存储操作类分享
2014/06/11 PHP
php实现html标签闭合检测与修复方法
2015/07/09 PHP
CI框架中redis缓存相关操作文件示例代码
2016/05/17 PHP
PHP获取中国时间(上海时区时间)及美国时间的方法
2017/02/23 PHP
Windows上php5.6操作mongodb数据库示例【配置、连接、获取实例】
2019/02/13 PHP
laradock环境docker-compose操作详解
2019/07/29 PHP
JavaScript图片放大技术(放大镜)实现代码分享
2013/11/14 Javascript
smartcrop.js智能图片裁剪库
2015/10/14 Javascript
超漂亮的jQuery图片轮播特效
2015/11/24 Javascript
canvas实现图像放大镜
2017/02/06 Javascript
jQuery EasyUI 为Combo,Combobox添加清除值功能的实例
2017/04/13 jQuery
使用JS实现图片轮播的实例(前后首尾相接)
2017/09/21 Javascript
react中的ajax封装实例详解
2017/10/17 Javascript
React Native 使用Fetch发送网络请求的示例代码
2017/12/02 Javascript
vue组件与复用详解
2018/04/08 Javascript
Node 升级到最新稳定版的方法分享
2018/05/17 Javascript
JS实现的3des+base64加密解密算法完整示例
2018/05/18 Javascript
vue之父子组件间通信实例讲解(props、$ref、$emit)
2018/05/22 Javascript
微信小程序单选框自定义赋值
2020/05/26 Javascript
Jquery使用each函数实现遍历及数组处理
2020/07/14 jQuery
pyside写ui界面入门示例
2014/01/22 Python
win8下python3.4安装和环境配置图文教程
2018/07/31 Python
使用Python批量修改文件名的代码实例
2019/01/24 Python
python关于调用函数外的变量实例
2019/12/26 Python
pytorch的梯度计算以及backward方法详解
2020/01/10 Python
解决python DataFrame 打印结果不换行问题
2020/04/09 Python
基于Python编写一个计算器程序,实现简单的加减乘除和取余二元运算
2020/08/05 Python
python用tkinter实现一个简易能进行随机点名的界面
2020/09/27 Python
Peter Alexander新西兰站:澳大利亚领先的睡衣设计师品牌
2016/12/10 全球购物
公益活动策划方案
2014/01/09 职场文书
大学毕业生求职自荐信
2014/02/20 职场文书
保护环境倡议书100字
2014/05/19 职场文书
团员自我评价范文
2015/03/10 职场文书
爱的教育观后感
2015/06/17 职场文书