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

 对于一个网站来说,即需要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' }

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

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

看了很多多页项目，有 2 个方案：

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

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

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 了，很多项目基本多是通过

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