溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
對于一個網站來說,即需要h6頁面也同時需要web頁面,而h6和web頁面共用很多代碼,不做響應式,只能拆分兩個頁面來寫,一個h6,一個web.用vue cli3怎么配置h6與web的應用呢?
解決思路:
首先,需要產生多頁面應用,用webpack配置成多頁面應用,一個h6一個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 了，很多項目基本多是通過
/ 分隔符來對字符串進行數組話，然后簡單地獲取
但是熟悉 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
})
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持億速云。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
