Vue如何实现多页面配置以及打包方式

更新时间：2022年10月14日 10:17:17 作者：久居我心你却从未交房租

这篇文章主要介绍了Vue如何实现多页面配置以及打包方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教

为什么会用多页面

在开发时，对于同一类型的多网站，多页面大大节省开发时间，只需要配置一次就可以实现多次开发变成单次开发，同时一个包就可以展示一整个网站

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

多页面打包会打包多个.html文件，根据.html配置跳转地址就可以了

目录（四个页面）

配置打包相关

//引入打包组件
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'
// 打包环境变量
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)
}

配置多页面相关

//定义多页面路径
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)
    }
  }
}

总结

const fs = require('fs')
const path = require('path')
const FileManagerPlugin = require('filemanager-webpack-plugin')
const productionDistPath = './productionDist'
// 是否打包
const isProduction = process.env.NODE_ENV === 'production'
// 打包环境变量
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)
}

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

vue实现扫码功能
这篇文章主要为大家详细介绍了vue实现扫码功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2020-01-01
vue2.0如何借用vue-pdf实现在线预览pdf文件
这篇文章主要介绍了vue2.0如何借用vue-pdf实现在线预览pdf文件问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2024-03-03
vue实现简易计算器功能
这篇文章主要为大家详细介绍了vue实现简易计算器功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2021-01-01
详解Vue实战指南之依赖注入(provide/inject)
这篇文章主要介绍了详解Vue实战指南之依赖注入(provide/inject)，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-11-11
vue项目中Toast字体过小,没有边距的解决方案
这篇文章主要介绍了vue项目中Toast字体过小，没有边距的解决方案。具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-04-04
在Vue项目中使用d3.js的实例代码
这篇文章主要介绍了在Vue项目中使用d3.js的实例代码，非常不错，具有参考借鉴价值价值,需要的朋友可以参考下
2018-05-05
vue、uniapp中动态添加绑定style、class 9种实现方法
这篇文章主要介绍了vue、uniapp中动态添加绑定style、class 9种方法实现,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2023-09-09
vue中组件＜router-view＞使用方法详解
这篇文章主要给大家介绍了关于vue中组件＜router-view＞使用方法的相关资料,Vue 路由中的 <router-view/> 是用来承载当前级别下的子级路由的一个视图标签,此标签的作用就是显示当前路由级别下一级的页面,需要的朋友可以参考下
2024-06-06
详解vite2.0配置学习(typescript版本)
这篇文章主要介绍了详解vite2.0配置学习(typescript版本)，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2021-02-02
vuex安装失败解决的方法实例
Vuex是一个专为Vue.js应用程序开发的状态管理模式,下面这篇文章主要给大家介绍了关于vuex安装失败解决的方法,文中通过图文介绍的非常详细,需要的朋友可以参考下
2022-07-07