vue單頁(yè)面改造多頁(yè)面應(yīng)用詳解第1/2頁(yè)
單頁(yè)面和多頁(yè)面的區(qū)別這里就不細(xì)說了。我司業(yè)務(wù)適合多頁(yè)面，許多小應(yīng)用都是通過iframe整體嵌入的形式。
- 如果項(xiàng)目過于龐大，就會(huì)有很不好的體驗(yàn)問題。
- 拆分多個(gè)項(xiàng)目的話，又會(huì)有額外的開支，如服務(wù)器資源部署等問題。
基于此改造的目標(biāo)
- 單獨(dú)業(yè)務(wù)邏輯單獨(dú)一個(gè)頁(yè)面
- 可實(shí)現(xiàn)單命令打包
- 可單獨(dú)打包
首先我們準(zhǔn)備一個(gè)基礎(chǔ)的項(xiàng)目，目錄結(jié)構(gòu)如下
src目錄為我們平時(shí)開發(fā)的目錄，dist為打包后的目錄，整體結(jié)構(gòu)如圖
1 將當(dāng)前項(xiàng)目改造成多頁(yè)面目錄
pages下為我們開發(fā)的目錄文件，改造過程就是將原src下所有目錄結(jié)構(gòu)復(fù)制到home，index每個(gè)頁(yè)面單獨(dú)一份 為了提現(xiàn)多頁(yè)面優(yōu)勢(shì)，這里我們選用兩款ui框架，以便最后做下打包體積對(duì)比
npm i element-ui -S npm i ant-design-vue -S
在home和index中分別引入
home頁(yè)面類似，然后我們更改vue.config.js
module.exports = {
publicPath: './',
productionSourceMap: false,
pages: { // vue cli3 自帶多頁(yè)面配置
index: {
entry: `src/pages/index/main.js`,
template: `public/index.html`,
filename: `index.html`
},
home: {
entry: `src/pages/home/main.js`,
template: `public/index.html`,
filename: `home.html`
}
},
devServer: {
port: 8080
},
lintOnSave: false
}
現(xiàn)在我們打包，看一下生成的目錄結(jié)構(gòu)
File Size Gzipped dist\js\chunk-vendors.239e820f.js 2544.36 KiB 703.20 KiB dist\js\index.1716ccad.js 11.33 KiB 4.13 KiB dist\js\home.e4410a07.js 7.08 KiB 2.57 KiB dist\js\about.ca80b2fc.js 0.76 KiB 0.29 KiB dist\css\chunk-vendors.68b49edf.css 666.01 KiB 89.04 KiB dist\css\index.5dfa7415.css 0.45 KiB 0.28 KiB dist\css\home.d995708f.css 0.44 KiB 0.27 KiB Images and other types of assets omitted. Build at: 2022-05-01T12:26:06.551Z - Hash: 693bf5bdcf72896b - Time: 16240ms DONE Build complete. The dist directory is ready to be deployed. INFO Check out deployment instructions at https://cli.vuejs.org/guide/deployment.html
可以看到打包出來的是混在一起的。我們下一步就是將他們拆分開，并且可配置命令單獨(dú)打包 思路是循環(huán)pages下文件夾 我們找出pages下目錄中帶有main.js的所有文件夾名。當(dāng)然我們也可以手動(dòng)寫死，每次增加頁(yè)面的時(shí)候，我們單獨(dú)維護(hù)這個(gè)數(shù)組
const pages = ['home', 'index'] // 在增加頁(yè)面的時(shí)候，手動(dòng)維護(hù)這個(gè)數(shù)組
當(dāng)然我們也有方法可以幫我們維護(hù)這個(gè)數(shù)組，可以在我們更新的時(shí)候省事一些
// 獲取pages下文件夾
const path = require('path')
const glob = require('glob')
// 找到pages所在文件夾 hello-world\src\pages
const PATH_ENTRY = path.resolve(__dirname, '../src/pages')
// 匹配到pages路徑下 main.js 的文件
// [
// 'D:/測(cè)試項(xiàng)目/hello-world/src/pages/home/main.js',
// 'D:/測(cè)試項(xiàng)目/hello-world/src/pages/index/main.js'
// ]
const entryFilePaths = glob.sync(PATH_ENTRY + '/**/main.js')
const buildEntries = []
entryFilePaths.forEach((filePath) => {
// 找到對(duì)應(yīng)的文件名，index home
const FILENAME = filePath.match(/([^/]+)\/main\.js$/)[1]
buildEntries.push(FILENAME)
})
module.exports = {
buildEntries
}
buildEntries 既為我們拿到的數(shù)組
現(xiàn)在我們繼續(xù)改造vue.config.js, 我們先通過更改package.json中的命令傳參的形式，根據(jù)我們傳遞的參數(shù)，單獨(dú)打包對(duì)應(yīng)的page
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"build:index": "vue-cli-service build index --no-clean", // 注意no-clean 不能清除文件，不然可能將文件夾下打包的其他page清理掉，如果是每次部署一個(gè)page，這就無(wú)所謂了
"build:home": "vue-cli-service build home --no-clean",
"build:prod": "vue-cli-service build",
"_build": "node build/build.js",
"lint": "vue-cli-service lint"
}
我們?nèi)绾文苣玫?傳入的index 或者h(yuǎn)ome參數(shù)呢 結(jié)果是process.argv這個(gè)參數(shù)中可以取到，具體可以自行搜索下 process.argv為一個(gè)數(shù)組，第一項(xiàng)為可執(zhí)行文件的目錄 第二項(xiàng)為當(dāng)前執(zhí)行的JavaScript文件路徑 剩余的是傳遞的參數(shù)，就如我們傳遞的index 是在process.argv[3]中 現(xiàn)將vue.config.js改造如下
// 編譯配置的多頁(yè)面
const modules = {}
const isProduction = process.env.NODE_ENV === 'production'
const { buildEntries } = require('./config/getPages')
// 初始化頁(yè)面參數(shù)
function initPageParams(page) {
modules
相關(guān)文章
Vue3中的Teleport與Portal的區(qū)別分析
在現(xiàn)代前端開發(fā)中,特別是使用Vue.js進(jìn)行構(gòu)建時(shí),開發(fā)者常常面臨著如何更有效地管理DOM結(jié)構(gòu)與組件之間的關(guān)系的問題,Vue 3引入了兩個(gè)頗具魅力的概念——Teleport和Portal,本文將深入探討這兩者的不同之處,需要的朋友可以參考下2025-01-01
這篇文章主要介紹了vue實(shí)現(xiàn)瀏覽器全屏展示功能,項(xiàng)目中使用的是sreenfull插件，執(zhí)行命令安裝，具體實(shí)現(xiàn)代碼跟隨小編一起看看吧2019-11-11
這篇文章主要為大家詳細(xì)介紹了vue+canvas實(shí)現(xiàn)拼圖小游戲，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-09-09
這篇文章主要為大家詳細(xì)介紹了Vue實(shí)現(xiàn)學(xué)生管理功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-06-06
這篇文章主要為大家介紹了Vue2?this直接獲取data和methods原理解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-12-12
這篇文章主要介紹了vue踩坑之在input中使用filters局部過濾器問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-11-11
vue.js element-ui tree樹形控件改iview的方法
這篇文章主要介紹了vue.js element-ui tree樹形控件改iview的方法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-03-03
Element Carousel 走馬燈的具體實(shí)現(xiàn)
這篇文章主要介紹了Element Carousel 走馬燈的具體實(shí)現(xiàn),文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-07-07
docxtemplater?是一種郵件合并工具,以編程方式使用并處理?xiàng)l件、循環(huán),并且可以擴(kuò)展以插入任何內(nèi)容,下面我們來看看如何使用docxtemplater導(dǎo)出word吧2025-04-04
這篇文章主要介紹了vue之prop與$emit的用法說明，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04