整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
言
現實應用環境，會有使用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小時內與您取得聯系。
