Vue如何實現(xiàn)多頁面配置以及打包方式

更新時間：2022年10月14日 10:17:17 作者：久居我心你卻從未交房租

這篇文章主要介紹了Vue如何實現(xiàn)多頁面配置以及打包方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教

為什么會用多頁面

在開發(fā)時，對于同一類型的多網(wǎng)站，多頁面大大節(jié)省開發(fā)時間，只需要配置一次就可以實現(xiàn)多次開發(fā)變成單次開發(fā)，同時一個包就可以展示一整個網(wǎng)站

如何在vue.config.js配置多頁面信息

多頁面打包會打包多個.html文件，根據(jù).html配置跳轉(zhuǎn)地址就可以了

目錄（四個頁面）

配置打包相關(guān)

//引入打包組件
const FileManagerPlugin = require('filemanager-webpack-plugin')

//配置打包信息
const fs = require('fs')
const path = require('path')
const FileManagerPlugin = require('filemanager-webpack-plugin')
const productionDistPath = './productionDist'
// 是否打包
const isProduction = process.env.NODE_ENV === 'production'
// 打包環(huán)境變量
const envType = process.env.ENV_TYPE || 'prod'
module.exports = {
	// 打包生成壓縮包
      const fileManagerPlugin = new FileManagerPlugin({
        //初始化 filemanager-webpack-plugin 插件實例
        events: {
          onEnd: {
            delete: [
              //首先需要刪除項目根目錄下的dist.zip
              productionDistPath
            ],
            archive: [
              //然后我們選擇dist文件夾將之打包成dist.zip并放在根目錄
              {
                source: './dist',
                destination: getCompressionName()
              }
            ]
          }
        }
      })
      config.plugins.push(fileManagerPlugin)
}
// 獲取打包壓縮包路徑
function getCompressionName() {
  try {
    const projectName = JSON.parse(fs.readFileSync('package.json')).name
    return `${productionDistPath}/${projectName}-${new Date().getTime()}-${envType}.zip`
  } catch (e) {
    return `${productionDistPath}/dist.zip`
  }
}
function resolve(dir) {
  return path.join(__dirname, dir)
}

配置多頁面相關(guān)

//定義多頁面路徑
const pagesArray = [
  {
    pagePath: 'applications',
    pageName: '名稱',
    chunks: ['chunk-element-plus']
  },
  { pagePath: 'index', pageName: '名稱' },
  {
    pagePath: 'uiLibrary',
    pageName: '名稱',
    chunks: ['chunk-element-plus', 'chunk-ant-design-vue']
  },
  {
    pagePath: 'visualizationLibrary',
    pageName: '名稱'
  }
]
const pages = {}
pagesArray.forEach(item => {
  const itemChunks = item.chunks
    ? [item.pagePath, ...item.chunks]
    : [item.pagePath]
  pages[item.pagePath] = {
    entry: `src/pages/${item.pagePath}/main.js`,
    template: 'public/index.html',
    filename: `${item.pagePath}.html`,
    title: item.pageName,
    chunks: ['chunk-vendors', 'chunk-common', ...itemChunks]
  }
})
module.exports = {
  publicPath: './',
  // 多頁配置
  pages,
  // lintOnSave: false,
  css: {
    loaderOptions: {
      less: {
        lessOptions: {
          javascriptEnabled: true,
          modifyVars: {
            // 'primary-color': 'red'
          }
        }
      }
    }
  },
  // 打包時不生成.map文件
  productionSourceMap: false,
  // 配置webpack
  configureWebpack: config => {
    config.resolve.alias = {
      '@': resolve('src'),
      '@index': resolve('src/pages/index'),
      '@applications': resolve('src/pages/applications'),
      '@uiLibrary': resolve('src/pages/uiLibrary'),
      '@visualizationLibrary': resolve('src/pages/visualizationLibrary')
    }
    if (isProduction) {
      config.optimization.CommonsChunkPlugin
      // 開啟分離js
      config.optimization = {
        // runtimeChunk: 'single',
        splitChunks: {
          chunks: 'all',
          cacheGroups: {
            // 抽離所有入口的公用資源為一個chunk
            common: {
              name: 'chunk-common',
              chunks: 'initial',
              minChunks: 2,
              maxInitialRequests: 5,
              minSize: 0,
              priority: 1,
              reuseExistingChunk: true,
              enforce: true
            },
            // 抽離node_modules下的庫為一個chunk
            vendors: {
              name: 'chunk-vendors',
              test: /[\\/]node_modules[\\/]/,
              chunks: 'initial',
              priority: 2,
              reuseExistingChunk: true,
              enforce: true
            },
            antd: {
              name: 'chunk-ant-design-vue',
              test: /[\\/]node_modules[\\/]ant-design-vue[\\/]/,
              chunks: 'all',
              priority: 3,
              reuseExistingChunk: true,
              enforce: true
            },
            element: {
              name: 'chunk-element-plus',
              test: /[\\/]node_modules[\\/]element-plus[\\/]/,
              chunks: 'all',
              priority: 3,
              reuseExistingChunk: true,
              enforce: true
            },
            echarts: {
              name: 'chunk-echarts',
              test: /[\\/]node_modules[\\/](vue-)?echarts[\\/]/,
              chunks: 'all',
              priority: 4,
              reuseExistingChunk: true,
              enforce: true
            },
            // 由于echarts使用了zrender庫，那么需要將其抽離出來，這樣就不會放在公共的chunk中
            zrender: {
              name: 'chunk-zrender',
              test: /[\\/]node_modules[\\/]zrender[\\/]/,
              chunks: 'all',
              priority: 3,
              reuseExistingChunk: true,
              enforce: true
            }
          }
        }
      }
      // 打包生成壓縮包
      const fileManagerPlugin = new FileManagerPlugin({
        //初始化 filemanager-webpack-plugin 插件實例
        events: {
          onEnd: {
            delete: [
              //首先需要刪除項目根目錄下的dist.zip
              productionDistPath
            ],
            archive: [
              //然后我們選擇dist文件夾將之打包成dist.zip并放在根目錄
              {
                source: './dist',
                destination: getCompressionName()
              }
            ]
          }
        }
      })
      config.plugins.push(fileManagerPlugin)
    }
  }
}

總結(jié)

const fs = require('fs')
const path = require('path')
const FileManagerPlugin = require('filemanager-webpack-plugin')
const productionDistPath = './productionDist'
// 是否打包
const isProduction = process.env.NODE_ENV === 'production'
// 打包環(huán)境變量
const envType = process.env.ENV_TYPE || 'prod'
const pagesArray = [
  {
    pagePath: 'applications',
    pageName: '名稱',
    chunks: ['chunk-element-plus']
  },
  { pagePath: 'index', pageName: '名稱' },
  {
    pagePath: 'uiLibrary',
    pageName: '名稱',
    chunks: ['chunk-element-plus', 'chunk-ant-design-vue']
  },
  {
    pagePath: 'visualizationLibrary',
    pageName: '名稱'
  }
]
const pages = {}
pagesArray.forEach(item => {
  const itemChunks = item.chunks
    ? [item.pagePath, ...item.chunks]
    : [item.pagePath]
  pages[item.pagePath] = {
    entry: `src/pages/${item.pagePath}/main.js`,
    template: 'public/index.html',
    filename: `${item.pagePath}.html`,
    title: item.pageName,
    chunks: ['chunk-vendors', 'chunk-common', ...itemChunks]
  }
})
module.exports = {
  publicPath: './',
  // 多頁配置
  pages,
  // lintOnSave: false,
  css: {
    loaderOptions: {
      less: {
        lessOptions: {
          javascriptEnabled: true,
          modifyVars: {
            // 'primary-color': 'red'
          }
        }
      }
    }
  },
  // 打包時不生成.map文件
  productionSourceMap: false,
  // 配置webpack
  configureWebpack: config => {
    config.resolve.alias = {
      '@': resolve('src'),
      '@index': resolve('src/pages/index'),
      '@applications': resolve('src/pages/applications'),
      '@uiLibrary': resolve('src/pages/uiLibrary'),
      '@visualizationLibrary': resolve('src/pages/visualizationLibrary')
    }
    if (isProduction) {
      config.optimization.CommonsChunkPlugin
      // 開啟分離js
      config.optimization = {
        // runtimeChunk: 'single',
        splitChunks: {
          chunks: 'all',
          cacheGroups: {
            // 抽離所有入口的公用資源為一個chunk
            common: {
              name: 'chunk-common',
              chunks: 'initial',
              minChunks: 2,
              maxInitialRequests: 5,
              minSize: 0,
              priority: 1,
              reuseExistingChunk: true,
              enforce: true
            },
            // 抽離node_modules下的庫為一個chunk
            vendors: {
              name: 'chunk-vendors',
              test: /[\\/]node_modules[\\/]/,
              chunks: 'initial',
              priority: 2,
              reuseExistingChunk: true,
              enforce: true
            },
            antd: {
              name: 'chunk-ant-design-vue',
              test: /[\\/]node_modules[\\/]ant-design-vue[\\/]/,
              chunks: 'all',
              priority: 3,
              reuseExistingChunk: true,
              enforce: true
            },
            element: {
              name: 'chunk-element-plus',
              test: /[\\/]node_modules[\\/]element-plus[\\/]/,
              chunks: 'all',
              priority: 3,
              reuseExistingChunk: true,
              enforce: true
            },
            echarts: {
              name: 'chunk-echarts',
              test: /[\\/]node_modules[\\/](vue-)?echarts[\\/]/,
              chunks: 'all',
              priority: 4,
              reuseExistingChunk: true,
              enforce: true
            },
            // 由于echarts使用了zrender庫，那么需要將其抽離出來，這樣就不會放在公共的chunk中
            zrender: {
              name: 'chunk-zrender',
              test: /[\\/]node_modules[\\/]zrender[\\/]/,
              chunks: 'all',
              priority: 3,
              reuseExistingChunk: true,
              enforce: true
            }
          }
        }
      }
      // 打包生成壓縮包
      const fileManagerPlugin = new FileManagerPlugin({
        //初始化 filemanager-webpack-plugin 插件實例
        events: {
          onEnd: {
            delete: [
              //首先需要刪除項目根目錄下的dist.zip
              productionDistPath
            ],
            archive: [
              //然后我們選擇dist文件夾將之打包成dist.zip并放在根目錄
              {
                source: './dist',
                destination: getCompressionName()
              }
            ]
          }
        }
      })
      config.plugins.push(fileManagerPlugin)
    }
  }
}
// 獲取打包壓縮包路徑
function getCompressionName() {
  try {
    const projectName = JSON.parse(fs.readFileSync('package.json')).name
    return `${productionDistPath}/${projectName}-${new Date().getTime()}-${envType}.zip`
  } catch (e) {
    return `${productionDistPath}/dist.zip`
  }
}
function resolve(dir) {
  return path.join(__dirname, dir)
}

以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: