vue單頁面改造多頁面應(yīng)用的全過程記錄

更新時間：2022年05月05日 12:43:26 作者：長衫罩子龍

眾所都知vue是一個單頁面應(yīng)用,下面這篇文章主要給大家介紹了關(guān)于vue單頁面改造多頁面應(yīng)用的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下

前言

單頁面和多頁面的區(qū)別這里就不細(xì)說了。我司業(yè)務(wù)適合多頁面，許多小應(yīng)用都是通過iframe整體嵌入的形式。

如果項(xiàng)目過于龐大，就會有很不好的體驗(yàn)問題。
拆分多個項(xiàng)目的話，又會有額外的開支，如服務(wù)器資源部署等問題。

基于此改造的目標(biāo)

單獨(dú)業(yè)務(wù)邏輯單獨(dú)一個頁面
可實(shí)現(xiàn)單命令打包
可單獨(dú)打包

首先我們準(zhǔn)備一個基礎(chǔ)的項(xiàng)目

目錄結(jié)構(gòu)如下

src目錄為我們平時開發(fā)的目錄，dist為打包后的目錄，整體結(jié)構(gòu)如圖

1 將當(dāng)前項(xiàng)目改造成多頁面目錄

pages下為我們開發(fā)的目錄文件，改造過程就是將原src下所有目錄結(jié)構(gòu)復(fù)制到home，index每個頁面單獨(dú)一份為了提現(xiàn)多頁面優(yōu)勢，這里我們選用兩款ui框架，以便最后做下打包體積對比

npm i element-ui -S
npm i ant-design-vue -S

在home和index中分別引入

home頁面類似，然后我們更改vue.config.js

module.exports = {
  publicPath: './',
  productionSourceMap: false,
  pages: { // vue cli3 自帶多頁面配置
    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ú)維護(hù)這個數(shù)組

const pages = ['home', 'index'] // 在增加頁面的時候，手動維護(hù)這個數(shù)組

當(dāng)然我們也有方法可以幫我們維護(hù)這個數(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:/測試項(xiàng)目/hello-world/src/pages/home/main.js',
//   'D:/測試項(xiàng)目/hello-world/src/pages/index/main.js'
// ]
const entryFilePaths = glob.sync(PATH_ENTRY + '/**/main.js')

const buildEntries = []
entryFilePaths.forEach((filePath) => {
  // 找到對應(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ú)打包對應(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清理掉，如果是每次部署一個page，這就無所謂了
    "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這個參數(shù)中可以取到，具體可以自行搜索下 process.argv為一個數(shù)組，第一項(xiàng)為可執(zhí)行文件的目錄第二項(xiàng)為當(dāng)前執(zhí)行的JavaScript文件路徑剩余的是傳遞的參數(shù)，就如我們傳遞的index 是在process.argv[3]中現(xiàn)將vue.config.js改造如下

// 編譯配置的多頁面
const modules = {}
const isProduction = process.env.NODE_ENV === 'production'
const { buildEntries } = require('./config/getPages')

// 初始化頁面參數(shù)
function initPageParams(page) {
  modules[ page ] = {
    entry: `src/pages/${page}/main.js`, // page 的入口
    template: `public/index.html`, // 模板來源
    filename: `${page}.html`, // 在 dist/index.html 的輸出
  }
}

const page = process.argv[3] || 'index'
// 如果是 開發(fā)環(huán)境，運(yùn)行階段
if (!isProduction) {
  for (const page of buildEntries) {
    initPageParams(page)
  }
} else {
  // 只有在生產(chǎn)打包的時候，單獨(dú)打包，拆成不用的文件夾
  initPageParams(page)
}

module.exports = {
  publicPath: './',
  outputDir: 'dist',
  assetsDir: isProduction ? page : 'static',
  productionSourceMap: false,
  pages: modules,
  devServer: {
    port: 8080
  },
  lintOnSave: false
}

這時候我們npm run build:index 嘗試查看打包結(jié)果，可以看到，可以將index對應(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)绻?，一個命令打包所有的page呢。這個時候我們就需要node一個方法來幫助我們實(shí)現(xiàn)了我們在單獨(dú)建一個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í)行我們的命令,第一個參數(shù)是命令,第二個參數(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方法來替我們執(zhí)行打包命令,現(xiàn)在我們執(zhí)行,npm run _build