vue單頁(yè)面改造多頁(yè)面應(yīng)用詳解第1/2頁(yè)
單頁(yè)面和多頁(yè)面的區(qū)別這里就不細(xì)說(shuō)了。我司業(yè)務(wù)適合多頁(yè)面,許多小應(yīng)用都是通過(guò)iframe整體嵌入的形式。
- 如果項(xiàng)目過(guò)于龐大,就會(huì)有很不好的體驗(yàn)問(wèn)題。
- 拆分多個(gè)項(xiàng)目的話,又會(huì)有額外的開(kāi)支,如服務(wù)器資源部署等問(wèn)題。
基于此改造的目標(biāo)
- 單獨(dú)業(yè)務(wù)邏輯單獨(dú)一個(gè)頁(yè)面
- 可實(shí)現(xiàn)單命令打包
- 可單獨(dú)打包
首先我們準(zhǔn)備一個(gè)基礎(chǔ)的項(xiàng)目,目錄結(jié)構(gòu)如下
src目錄為我們平時(shí)開(kāi)發(fā)的目錄,dist為打包后的目錄,整體結(jié)構(gòu)如圖
1 將當(dāng)前項(xiàng)目改造成多頁(yè)面目錄
pages下為我們開(kāi)發(fā)的目錄文件,改造過(guò)程就是將原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
可以看到打包出來(lái)的是混在一起的。我們下一步就是將他們拆分開(kāi),并且可配置命令單獨(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, 我們先通過(guò)更改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)文章
vue 使用鼠標(biāo)滾動(dòng)加載數(shù)據(jù)的例子
今天小編就為大家分享一篇vue 使用鼠標(biāo)滾動(dòng)加載數(shù)據(jù)的例子,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-10-10vue在install時(shí)node-sass@4.14.1?postinstall:node?scripts/buil
最近在npm install 的時(shí)候遇到了個(gè)問(wèn)題,所以給大家總結(jié)下,下面這篇文章主要給大家介紹了關(guān)于vue在install時(shí)node-sass@4.14.1?postinstall:node?scripts/build.js錯(cuò)誤的解決方法,需要的朋友可以參考下2023-05-05vue項(xiàng)目中常用解決跨域的方法總結(jié)(CORS和Proxy)
在vue項(xiàng)目中,一般我們會(huì)遇到跨域的問(wèn)題,vue項(xiàng)目中解決跨域是非常簡(jiǎn)單的,下面這篇文章主要給大家介紹了關(guān)于vue項(xiàng)目中常用解決跨域的方法,主要解釋CROS和Proxy兩種方式,需要的朋友可以參考下2022-12-12vue使用axios實(shí)現(xiàn)文件上傳進(jìn)度的實(shí)時(shí)更新詳解
最近在學(xué)習(xí)axios,然后項(xiàng)目就用到了,所以這篇文章主要給大家介紹了關(guān)于vue中利用axios實(shí)現(xiàn)文件上傳進(jìn)度的實(shí)時(shí)更新的相關(guān)資料,文中先對(duì)axios進(jìn)行了簡(jiǎn)單的介紹,方法大家理解學(xué)習(xí),需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧。2017-12-12vue3導(dǎo)入excel并解析excel數(shù)據(jù)渲染到表格中(純前端實(shí)現(xiàn))
在Vue中實(shí)現(xiàn)導(dǎo)出Excel有多種方式,可以通過(guò)前端實(shí)現(xiàn),也可以通過(guò)前后端配合實(shí)現(xiàn),下面這篇文章主要給大家介紹了關(guān)于vue3導(dǎo)入excel并解析excel數(shù)據(jù)渲染到表格中的相關(guān)資料,文中介紹的方法是純前端實(shí)現(xiàn),需要的朋友可以參考下2024-04-04Vue開(kāi)發(fā)之watch監(jiān)聽(tīng)數(shù)組、對(duì)象、變量操作分析
這篇文章主要介紹了Vue開(kāi)發(fā)之watch監(jiān)聽(tīng)數(shù)組、對(duì)象、變量操作,結(jié)合實(shí)例形式分析了vue.js使用Watch針對(duì)數(shù)組、對(duì)象、變量監(jiān)聽(tīng)相關(guān)操作技巧,需要的朋友可以參考下2019-04-04完美解決axios跨域請(qǐng)求出錯(cuò)的問(wèn)題
下面小編就為大家分享一篇完美解決axios跨域請(qǐng)求出錯(cuò)的問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-02-02解決Echarts2豎直datazoom滑動(dòng)后顯示數(shù)據(jù)不全的問(wèn)題
這篇文章主要介紹了解決Echarts2豎直datazoom滑動(dòng)后顯示數(shù)據(jù)不全的問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-07-07