详解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 相关文章推荐
jQuery中live方法的重复绑定说明
Oct 21 Javascript
jquery验证手机号码、邮箱格式是否正确示例代码
Jul 28 Javascript
jQuery满屏焦点图左右滚动特效代码分享
Sep 07 Javascript
js仿淘宝和百度文库的评分功能
May 15 Javascript
深入理解React中es6创建组件this的方法
Aug 29 Javascript
BOM之navigator对象和用户代理检测
Feb 10 Javascript
使用AngularJS编写多选按钮选中时触发指定方法的指令代码详解
Jul 24 Javascript
轻量级JS Cookie插件js-cookie的使用方法
Mar 22 Javascript
代码实例ajax实现点击加载更多数据图片
Oct 12 Javascript
vue+axios+promise实际开发用法详解
Oct 15 Javascript
JavaScript获取页面元素的常用方法详解
Sep 28 Javascript
vue打包通过image-webpack-loader插件对图片压缩优化操作
Nov 12 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
让iframe子窗体取父窗体地址栏参数(querystring)
2009/10/13 Javascript
判断浏览器的javascript版本的代码
2010/09/03 Javascript
分享27款非常棒的jQuery 表单插件
2011/03/28 Javascript
33个优秀的 jQuery 图片展示插件分享
2012/03/14 Javascript
javascript限制文本框只允许输入数字(曾经与现在的方法对比)
2013/01/18 Javascript
html+css+js实现xp window界面及有关功能
2013/03/26 Javascript
JavaScript中的style.display属性操作
2013/03/27 Javascript
jquery实现图片灯箱明暗的遮罩效果
2013/11/15 Javascript
js中函数调用的两种常用方法使用介绍
2014/07/17 Javascript
跟我学习javascript的prototype原型和原型链
2015/11/18 Javascript
JS中的三个循环小结
2017/06/20 Javascript
基于JavaScript实现百度搜索框效果
2020/06/28 Javascript
详解express与koa中间件模式对比
2017/08/07 Javascript
vue element table 表格请求后台排序的方法
2018/09/28 Javascript
vue实现的双向数据绑定操作示例
2018/12/04 Javascript
微信小程序项目总结之记账小程序功能的实现(包括后端)
2019/08/20 Javascript
java实现单链表增删改查的实例代码详解
2019/08/30 Javascript
js面向对象封装级联下拉菜单列表的实现步骤
2021/02/08 Javascript
Python挑选文件夹里宽大于300图片的方法
2015/03/05 Python
python使用BeautifulSoup分析网页信息的方法
2015/04/04 Python
wxpython中Textctrl回车事件无效的解决方法
2016/07/21 Python
python 读写中文json的实例详解
2017/10/29 Python
matplotlib绘制动画代码示例
2018/01/02 Python
python画蝴蝶曲线图的实例
2019/11/21 Python
Python 防止死锁的方法
2020/07/29 Python
python 利用toapi库自动生成api
2020/10/19 Python
HTML5中的postMessage API基本使用教程
2016/05/20 HTML / CSS
Auguste The Label官网:澳大利亚一家精品女装时尚品牌
2020/06/14 全球购物
比较基础的php面试题及答案-编程题
2012/10/14 面试题
P/Invoke是什么
2015/07/31 面试题
运动会通讯稿50字
2014/01/30 职场文书
年终总结会主持词
2014/03/25 职场文书
党员评议思想汇报
2014/10/08 职场文书
2014年小学少先队工作总结
2014/12/18 职场文书
元旦主持词开场白
2015/05/29 职场文书
解除合同协议书范本
2016/03/21 职场文书