腳本之家服務器常用軟件

快捷導航

詳解Vue CLI3 多頁應用實踐和源碼設計

更新時間：2018年08月30日 13:50:59 作者：dailyvuejs

這篇文章主要介紹了詳解Vue CLI3 多頁應用實踐和源碼設計，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧

對于一個網(wǎng)站來說,即需要h5頁面也同時需要web頁面,而h5和web頁面共用很多代碼,不做響應式,只能拆分兩個頁面來寫,一個h5,一個web.用vue cli3怎么配置h5與web的應用呢?

解決思路:

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

我們看一下官網(wǎng)給的 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 文件，數(shù)組格式，包含入口文件

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

看了很多多頁項目，有 2 個方案：

一種叫 pages 文件夾
一種叫 views 或者其他名字的文件夾

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

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

入口文件：文件名可以叫 main.js 或者 index.js
模板文件：可以用統(tǒng)一的 'public/index.html'，或者目錄內(nèi)放置一個自己的，取名 index.html
title：可以從一個文件里面取

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

下面就是通過函數(shù)來生成 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 了，很多項目基本多是通過

/ 分隔符來對字符串進行數(shù)組話，然后簡單地獲取

但是熟悉 node.js path 模塊的會如下處理：

const pageName = path.basename(path.dirname(filepath))

往 pages 里面循環(huán)設置：

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'
 }

當然后面我們分享了源碼之后，你就會發(fā)現(xiàn)你做了無用功

下面我們看一下源碼實現(xiàn)部分:

每個版本的 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 循環(huán)

const pages = Object.keys(multiPageConfig)
pages.forEach(name => {
})

循環(huán)內(nèi)部：

先定義要用的變量，從 multiPageConfig[name] 的每一個對象?。?/p>

const {
   title,
   entry,
   template = `public/${name}.html`,
   filename = `${name}.html`,
   chunks
  } = normalizePageConfig(multiPageConfig[name])

normalizePageConfig 函數(shù)如下：

處理 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 的處理細節(jié)：

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 的處理細節(jié)：

傳遞給 html-webpack-plugin 插件的參數(shù)，這里默認會設置 chunks 的，所以上面實戰(zhàn)中配置也是無用功

const pageHtmlOptions = Object.assign({}, htmlOptions, {
   chunks: chunks || ['chunk-vendors', 'chunk-common', name],
   template: templatePath,
   filename: ensureRelative(outputDir, filename),
   title
  })

以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: