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

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

解决思路:

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

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

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

• 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：可以从一个文件里面取

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

第一步：找到入口文件

可以用 glob

pages 目录的位置，可以用相对路径，也可以用绝对路径：

定义一个 pages 对象：

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

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

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

往 pages 里面循环设置：

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

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

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

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

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

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

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

清空一次 entry

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

循环内部：

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

normalizePageConfig 函数如下：

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

设置 entry

hasDedicatedTemplate 是判断

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

templatePath 的处理细节：

htmlPath 路径是：

/Users/*/public/index.html

defaultHtmlPath 路径是：

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

如果：

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

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

1、指定目录：

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

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

pageHtmlOptions 的处理细节：

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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程之家。

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!