vue單頁(yè)面改造多頁(yè)面應(yīng)用詳解第2/2頁(yè)
這時(shí)候我們npm run build:index 嘗試查看打包結(jié)果,可以看到,可以將index對(duì)應(yīng)的文件全部放在index文件目錄下,如果我們需要打包home,直接npm run build:home
File Size Gzipped dist\index\js\chunk-vendors.c60bfe2f.j 1837.82 KiB 527.87 KiB s dist\index\js\index.e2aa144d.js 11.28 KiB 4.12 KiB dist\index\js\about.2a86a3cb.js 0.43 KiB 0.28 KiB dist\index\css\chunk-vendors.ef376986. 456.88 KiB 55.99 KiB css dist\index\css\index.5dfa7415.css 0.45 KiB 0.28 KiB Images and other types of assets omitted. Build at: 2022-05-03T03:46:54.824Z - Hash: e2d53105a245deab - Time: 12711ms DONE Build complete. The dist directory is ready to be deployed. INFO Check out deployment instructions at https://cli.vuejs.org/guide/deployment.html
現(xiàn)在我們已經(jīng)實(shí)現(xiàn)了,單獨(dú)page單獨(dú)打包,但我們?nèi)绻?,一個(gè)命令打包所有的page呢。這個(gè)時(shí)候我們就需要node一個(gè)方法來(lái)幫助我們實(shí)現(xiàn)了 我們?cè)趩为?dú)建一個(gè)js文件代碼如下
const fs = require('fs'); const execSync = require('child_process').execSync; const { buildEntries } = require('../config/getPages'); // 移除目錄 function deleteDist(path) { let files = []; // 判斷目錄是否存在 if (fs.existsSync(path)) { files = fs.readdirSync(path); // 讀取目錄 // @ts-ignore files.forEach((file) => { const curPath = path + '/' + file; // 拼接目錄寫文件完整路徑 if (fs.statSync(curPath).isDirectory()) { // 讀取文件路徑狀態(tài) 判斷是否為文件夾 如果為文件夾,遞歸 deleteDist(curPath); } else { fs.unlinkSync(curPath); // 刪除文件 } }); fs.rmdirSync(path); } } try { const startTime = Date.now(); process.env.NODE_ENV = 'production'; // 切換環(huán)境為生產(chǎn) // 執(zhí)行打包前刪除dist目錄 deleteDist('./dist'); for (const page of buildEntries) { // 可以執(zhí)行我們的命令,第一個(gè)參數(shù)是命令,第二個(gè)參數(shù)的意思是輸出子進(jìn)程中的日志 execSync(`vue-cli-service build ${page} --no-clean`, { stdio: 'inherit' }); } // 重置 process.env.NODE_ENV = undefined; const time = Date.now() - startTime; console.log('\033[42;30m ALL DONE \033[0m Build Compiled successfully in ' + `${time / 1000}s`); } catch (e) { console.log('\033[41;30m FAILED \033[0m ' + e); }
思想就是循環(huán)執(zhí)行打包命令 關(guān)鍵在于execSync方法來(lái)替我們執(zhí)行打包命令,現(xiàn)在我們執(zhí)行,npm run _build
至此我們的多頁(yè)面打包基本完成,后續(xù)也可以做一些cdn的處理,或者chunks的拆包等優(yōu)化。小伙伴們自行研究
到此這篇關(guān)于vue單頁(yè)面改造多頁(yè)面應(yīng)用詳解的文章就介紹到這了,更多相關(guān)vue單頁(yè)面改造多頁(yè)面 內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!