vue單頁面改造多頁面應用詳解第1/2頁

Posted on by

單頁面和多頁面的區別這裡就不細說瞭。我司業務適合多頁面，許多小應用都是通過iframe整體嵌入的形式。

  • 如果項目過於龐大，就會有很不好的體驗問題。
  • 拆分多個項目的話，又會有額外的開支，如服務器資源部署等問題。

基於此改造的目標

  • 單獨業務邏輯單獨一個頁面
  • 可實現單命令打包
  • 可單獨打包

首先我們準備一個基礎的項目，目錄結構如下

image.png

src目錄為我們平時開發的目錄，dist為打包後的目錄，整體結構如圖

1 將當前項目改造成多頁面目錄

image.png

pages下為我們開發的目錄文件，改造過程就是將原src下所有目錄結構復制到home，index每個頁面單獨一份 為瞭提現多頁面優勢，這裡我們選用兩款ui框架，以便最後做下打包體積對比

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

在home和index中分別引入

image.png

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
}

現在我們打包，看一下生成的目錄結構

 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

可以看到打包出來的是混在一起的。我們下一步就是將他們拆分開，並且可配置命令單獨打包 思路是循環pages下文件夾 我們找出pages下目錄中帶有main.js的所有文件夾名。當然我們也可以手動寫死，每次增加頁面的時候，我們單獨維護這個數組

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

當然我們也有方法可以幫我們維護這個數組，可以在我們更新的時候省事一些

// 獲取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:/測試項目/hello-world/src/pages/home/main.js',
//   'D:/測試項目/hello-world/src/pages/index/main.js'
// ]
const entryFilePaths = glob.sync(PATH_ENTRY + '/**/main.js')

const buildEntries = []
entryFilePaths.forEach((filePath) => {
  // 找到對應的文件名，index  home
  const FILENAME = filePath.match(/([^/]+)\/main\.js$/)[1]
  buildEntries.push(FILENAME)
})
module.exports = {
  buildEntries
}

buildEntries 既為我們拿到的數組

現在我們繼續改造vue.config.js, 我們先通過更改package.json中的命令傳參的形式，根據我們傳遞的參數，單獨打包對應的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"
 }

我們如何能拿到 傳入的index 或者home參數呢 結果是process.argv這個參數中可以取到，具體可以自行搜索下 process.argv為一個數組，第一項為可執行文件的目錄 第二項為當前執行的JavaScript文件路徑 剩餘的是傳遞的參數，就如我們傳遞的index 是在process.argv[3]中 現將vue.config.js改造如下

// 編譯配置的多頁面

const modules = {}

const isProduction = process.env.NODE_ENV === 'production'

const { buildEntries } = require('./config/getPages')


// 初始化頁面參數

function initPageParams(page) {

  modules


12下一頁閱讀全文


推薦閱讀：