Vue如何实现多页面配置以及打包方式
作者：久居我心你却从未交房租 发布时间：2024-05-02 17:09:11
标签：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)
}
来源：https://blog.csdn.net/weixin_42888568/article/details/124047275
0
投稿猜你喜欢
- 假设有一个表，结构如下：mysql> CREATE TABLE `a` ( `id
PyQt5布局控件QGridLayout简介QGridLayout（网格布局）是将窗口分割成行和列的网格来进行排列，通常可以使用函数addW- 今天研究了些取access数据库随机记录问题，这是这我自己搜集整理的方法。大家有没有高见，可以告诉我，或者我总结的东东本身有误，也可以帮我修
- 当你试图在mysql中创建一个外键的时候，这个出错会经常发生，这是非常令人沮丧的。像这种不能创建一个.frm 文件的报错好像暗示着操作系统的
- 问题描述：idea打开窗口/tab过多导致隐藏解决办法如下图所示，如果打开太多的类，就会隐藏在后面的小三角里面，开发的时候不会很方便。解决方
- 前言在webpack模块化开发的过程中，发现webpack.config.js配置文件的输出路径总有一个path与publicPath，不解
- 什么是recovery？在elasticsearch中，recovery指的是一个索引的分片分配到另外一个节点的过程，一般在快照恢复、索引复
- upload.htm <html><head><title>网站维护 -
- linspace生成有序列表，重点在数据范围与数据个数上linspace(0,1,11)，即从0到1闭区间，划分为11个数据点>>
- 整理了一些JS的常用方法，包括验证啊，全选反选啊，ajax请求啊之类的，因为就是自己用的，写的都比较简单，就算抛砖引玉吧，喜欢的就拿去，不喜
- 1.样式的重用性CSS布局的网页最大的特点就是样式的可重用性,利用class选择符重复将某个样式属性多次在网页中使用，以减少不断定义样式属性
- 先来看看架构，如下图：部署1.修改hosts在所有的服务器中执行相同的操作。vim /etc/hosts192.168.137.10 mas
- Win10下python 2.7与python 3.7双环境安装教程，具体内容如下所示：1、python软件下载网址：https://www
- Perl 是 Practical Extraction and Report Language 的缩写，可翻译为 "实用报表提取语
- 搞了一个DIV+CSS菜单，兼容Firefox,分享给大家，大家一齐学习 <!DOCTYPE html PUBLIC "-/
- 编写断言使用assert编写断言pytest允许你使用python标准的assert表达式写断言；例如，你可以这样做：# test_samp
- 一、基础第三方库使用1.基本使用方法"""例"""from urllib imp
- 问题描述：使用指令 python -m pip install --upgrade pip 升级pip时，Pycharm报错：Attribu
- 不用切图，只要设置基本的 图片及其属性即可！用鼠标右键控制图片翻转！<style>*{ FONT-SIZE: 12px; }se
- 前言由于笔者近期的研究课题与图像后处理有关，需要通过图像处理工具对图像进行变换和处理，进而生成合适的训练图像数据。该系列文章即主要记录笔者在
