對(duì)于一個(gè)網(wǎng)站來(lái)說(shuō),即需要h5頁(yè)面也同時(shí)需要web頁(yè)面,而h5和web頁(yè)面共用很多代碼,不做響應(yīng)式,只能拆分兩個(gè)頁(yè)面來(lái)寫(xiě),一個(gè)h5,一個(gè)web.用vue cli3怎么配置h5與web的應(yīng)用呢?

解決思路:

首先,需要產(chǎn)生多頁(yè)面應(yīng)用,用webpack配置成多頁(yè)面應(yīng)用,一個(gè)h5一個(gè)web,這個(gè)網(wǎng)上已經(jīng)有很多教程了,下面會(huì)再整理一次,接著把所有公共的代碼提到多頁(yè)面目錄外面.

我們看一下官網(wǎng)給的 multi-page 的配置：需要在 vue.config.js 配置 pages，示例如下：

pages: { index: {  // page 的入口  entry: 'src/index/main.js',  // 模板來(lái)源  template: 'public/index.html',  // 在 dist/index.html 的輸出  filename: 'index.html',  // 當(dāng)使用 title 選項(xiàng)時(shí)，  // template 中的 title 標(biāo)簽需要是 <title><%= htmlWebpackPlugin.options.title %></title>  title: 'Index Page',  // 在這個(gè)頁(yè)面中包含的塊，默認(rèn)情況下會(huì)包含  // 提取出來(lái)的通用 chunk 和 vendor chunk。  chunks: ['chunk-vendors', 'chunk-common', 'index'] }, // 當(dāng)使用只有入口的字符串格式時(shí)， // 模板會(huì)被推導(dǎo)為 `public/subpage.html` // 并且如果找不到的話(huà)，就回退到 `public/index.html`。 // 輸出文件名會(huì)被推導(dǎo)為 `subpage.html`。 subpage: 'src/subpage/main.js' }

每一個(gè)頁(yè)面中就是一個(gè)對(duì)象，包含了如下配置：

首先，我們需要設(shè)計(jì)一下 src 目錄下面放置 multi-page 的文件：

看了很多多頁(yè)項(xiàng)目，有 2 個(gè)方案：

大家自行選擇或者定義就好了，這里我們選 pages

我們?cè)倏匆幌吕锩娴奈募?/p> 入口文件：文件名可以叫 main.js 或者 index.js 模板文件：可以用統(tǒng)一的 'public/index.html'，或者目錄內(nèi)放置一個(gè)自己的，取名 index.html title：可以從一個(gè)文件里面取

src pages page1  index.html  main.js  App.vue page2  index.html  main.js  App.vue 

下面就是通過(guò)函數(shù)來(lái)生成 pages 的配置：

第一步：找到入口文件

可以用 glob

const glob = require('glob')

pages 目錄的位置，可以用相對(duì)路徑，也可以用絕對(duì)路徑：

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

定義一個(gè) pages 對(duì)象：

const pages = {}

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

這里就是去設(shè)置對(duì)應(yīng)幾個(gè) key 了，很多項(xiàng)目基本多是通過(guò)

/ 分隔符來(lái)對(duì)字符串進(jìn)行數(shù)組話(huà)，然后簡(jiǎn)單地獲取