整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
言
现实应用环境，会有使用vue开发多页面环境的需求，这些页面拥有共同的依赖，但是却又都是独立的，为了实现vue的多页面打包，可以使用webpack，同时又因为vue-cli自带了webpack，所以我们还可以采用vue-cli本身的配置文件进行多页打包操作。
VUE3多页面打包
方式一：webpack配置
webpack安装参考：[安装 | webpack 中文网]。
直接在package.json同级目录下创建webpack.config.js(创建一个webpack的配置文件即可)，然后在配置文件内输入内容：
/**
*配置
* */
/*path处理模块，可有可无，主要是为了方便路径链接，因为在配置文件内对于参数而言只接受绝对路径，利用path.resovle(__dirname, 相对路径)可以自动生成绝对路径，此模块为webpack自带*/
let path = require('path')
/*vue-loader,vue加载插件，使用npm install vue-loader直接安装即可
*同时对于vue3而言需要单独安装@vue/compiler-sfc,vue2的话是vue-compiler
*/
let vueLoader = require('vue-loader')
/*html-webpack-plugin,模版处理插件，如果存在多个html模版就需要安装
*直接用npm install html-webpack-plugin
*/
let htmlWebPackPlugin = require('html-webpack-plugin')
/**
*compression-webpack-plugin，这是一个可选插件，目的是为了对打包后的文件进行压缩，因为打包后会形成一个大的js文件，文件越大网页打开速度越慢。
*/
let compressionWebpackPlugin = require('compression-webpack-plugin')
module.exports = {
/*打包入口，多入口就是从这里来的，当打包时，会去找到每一个入口文件，
并根据这个文件依赖去打包，每一个入口写一个key-value对*/
entry: {
/*key-value格式
key就是标识名称，之所以写成 "/js/index/index" 格式是为了在打包时将文件输出到对应目录，
默认情况下，文件只会输出到output所指定的目录下，之后便没有区分，这里用“/”分割就是利用输出路径时小漏洞形成目录*/
/*value是要打包入口的地址，利用path.resolve处理绝对路径问题*/
'/js/index/index': path.resolve(__dirname, './src/entry/index.js'),
'/js/index2/index2': path.resolve(__dirname, './src/entry/index2.js')
},
/*文件输出目录，只能有一个，[官方要求](https://www.webpackjs.com/concepts/output/)*/
output: {
/*输出的入口文件的名称，【name】就是刚才上面我们指定的key值，这个值不能通过外部变量或数组动态修改*/
filename: '[name].js',
/*输出目录，也需要指定绝对路径*/
path: path.resolve(__dirname, './dist')
},
/*插件配置与加载*/
plugins: [
/*加载vue文件打包插件*/
new vueLoader.VueLoaderPlugin,
/*html模版打包插件，有几个入口就要用几个，书写顺序与上方入口顺序一致，
如果只有一个，那么所有入口都会通过这一个模版打包*/
new htmlWebPackPlugin({
template: path.resolve(__dirname, './public/html/index.html'),
filename: 'index.html'
}),
new htmlWebPackPlugin({
template: path.resolve(__dirname, './public/html/index2.html'),
filename: 'xxjszx.html'
}),
/*加载压缩插件，将test中查找到的文件类型全部压缩，test的值对应的是一个正则表达式*/
new compressionWebpackPlugin({
test: /\.js$|\.html$|\.css$|\.jpg$|\.png$/,
threshold: 100000,
deleteOriginalAssets: false
})
],
module:{
/*文件处理规则*/
rules: [
{
/*css处理规则，直接用css-loader插件默认加载，css-loader插件也需要使用npm安装*/
test: /\.css$/,
use: ['style-loader', 'css-loader']
},
{
/*vue文件加载规则*/
test: /\.vue$/,
use: ['vue-loader']
},
{
/*图片文件处理规则，使用url-loader插件改写文件名并放到指定位置*/
test: /\.(jp?g|png|svg|ico)$/,
use: 'url-loader?limit=2048&name=./img/[hash:8].[name].[ext]'
}
]
}
}方式二：vue-cli配置
vue-cli目前已不提供vue.config.js配置文件，但是我们可以手动在package.json同级目录创建一个，创建成功后此文件将作为优先调用对象，结构与内容同webpack类似（其实就是内置的webpack配置），可参考官网配置解释：配置参考 | Vue CLI：
module.exports = {
/*pages指定入口，同样是key-value对的形式，只不过是将配置集成到了一起*/
pages: {
/*名称*/
xxjszx: {
/*入口，同上面的entry*/
entry: 'src/entry/xxjszx.js',
/*模版，同上面的html-webpack-plugin插件*/
template: 'public/html/xxjszx.html',
/*输出后的文件名称*/
filename: 'xxjszx.html',
},
index: {
entry: 'src/entry/index.js',
template: 'public/html/index.html',
/*这里是html输出到的文件地址，也可以利用/斜杠表示目录，例如index/index.html就代表创建index目录并把index.html放到目录下*/
filename: 'index.html',
}
}
}vue3多页面直接运行
使用vue.config.js配置好后，直接使用npm run dev命令即可，对应vue的vue-cli-service serve，运行可根据pages定义的key值进行路由调用页面，key值为index那么调用格式就是/index,默认页面是index路由对应页面。如果采用webpack打包是无法直接运行多页面的，需要在打包后部署到服务器上。
多数情况，我们使用webpack打包单页面应用，有的时候也会遇到多页面的项目
单入口配置
一般情况下的配置模板如下：
module.exports = {
entry: {},
output: {},
module: {},
plugins: [],
devServer: {}
}
entry
我们的入口文件一般都是JS文件
entry： {
entry: './src/entery.js'
}
output
output用来告诉webpack最后打包文件的地址和文件名称
output: {
//打包后的文件路径
path: path.resolve(__dirname, 'dist'),
//打包后的文件名称
filename: 'bundle.js'
}
当然还要引入path模块，这个是nodejs自带的模块；在webpack.config.js文件的头部引入；
const path = require('path');
打包HTML文件
需要使用html-webpack-plugin插件，它会将我们的html模板文件打包，自动生成一个引用了所有webpack打包的文件的新的html文件：
安装：
npm install html-webpack-plugin --save-dev
在配置文件的plugins内加载
var HtmlWebpackPlugin = require('html-webpack-plugin');
var path = require('path');
var webpackConfig = {
entry: 'index.js',
output: {
path: path.resolve(__dirname, './dist'),
filename: 'index_bundle.js'
},
plugins: [new HtmlWebpackPlugin({
minify:{
removeAttributeQuotes: true,
collapseWhitespace: true
},
template: './src/index.html'
})]
};
这将会产生一个包含以下内容的文件dist/index.html：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>webpack App</title>
</head>
<body>
<script src="index_bundle.js"></script>
</body>
</html>
这样一个最基本的单页面的配置文件如下：
const path = require('path');
module.exports = {
//入口文件的配置项
entry: {
entry: './src/entry.js'
},
//出口文件的配置项
output: {
//输出的路径，用了Node语法
path: path.resolve(__dirname, 'dist'),
//输出的文件名称
filename: 'bundle.js'
},
//模块：例如解读CSS,图片如何转换，压缩
module: {},
//插件，用于生产模版和各项功能
plugins: [new HtmlWebpackPlugin({
minify:{
removeAttributeQuotes: true,
collapseWhitespace: true
},
template: './src/index.html'
})]
//配置webpack开发服务功能
devServer: {}
}
多入口配置
多入口配置的时候只需要在entry中多增加一个入口文件
输出文件的时候将filename的值修改为[name].js，作用是根据入口文件的名称，打包成相同的名称，有几个入口文件，就可以打包出几个出口文件
同时将定义多个HtmlWebpackPlugin插件，有几个页面就配置几项
module.exports = {
entry: {
client1: './src/client1/client1.js',
client2: './src/client2/client2.js'
},
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'js/[name].bundle.js'
},
plugins: [
new HtmlWebpackPlugin({
title: 'client1',
filename: 'client1.html',
template: 'src/client1/client1.html',
inject: true,
minify: {
removeComments: true,
collapseWhitespace: true
}
}),
new HtmlWebpackPlugin({
title: 'client2',
filename: 'client2.html',
template: 'src/client2/client2.html',
inject: true,
minify: {
removeComments: true,
collapseWhitespace: true
}
})
],
};
#真相来了#
一、终端运行命令 npm run build
二、打包成功的标志与项目的改变，如下图：
3、点击index.html，通过浏览器运行，出现以下报错，如图：
四、那么应该如何修改呢？
具体步骤如下：
1、查看package.js文件的scripts命令
2、打开webpack.dev.conf.js文件，找到publicPath: config.dev.assetsPublicPath,按Ctrl点击，跳转到index.js文件
3、其中dev是开发环境，build是构建版本，找到build下面的assetsPublicPath: '/',然后修改为assetsPublicPath: './',即“/”前加点。
4、终端运行 npm run build 即可。
此时点击index.html，通过浏览器运行便，会发现动态绑定的static的图片找不到，故static必须使用绝对路径。将图片路径修改为绝对路径，至此，打包完成。
*请认真填写需求信息，我们会在24小时内与您取得联系。
