言
現(xiàn)實(shí)應(yīng)用環(huán)境,會(huì)有使用vue開(kāi)發(fā)多頁(yè)面環(huán)境的需求,這些頁(yè)面擁有共同的依賴,但是卻又都是獨(dú)立的,為了實(shí)現(xiàn)vue的多頁(yè)面打包,可以使用webpack,同時(shí)又因?yàn)関ue-cli自帶了webpack,所以我們還可以采用vue-cli本身的配置文件進(jìn)行多頁(yè)打包操作。
VUE3多頁(yè)面打包
方式一:webpack配置
webpack安裝參考:[安裝 | webpack 中文網(wǎng)]。
直接在package.json同級(jí)目錄下創(chuàng)建webpack.config.js(創(chuàng)建一個(gè)webpack的配置文件即可),然后在配置文件內(nèi)輸入內(nèi)容:
/**
*配置
* */
/*path處理模塊,可有可無(wú),主要是為了方便路徑鏈接,因?yàn)樵谂渲梦募?nèi)對(duì)于參數(shù)而言只接受絕對(duì)路徑,利用path.resovle(__dirname, 相對(duì)路徑)可以自動(dòng)生成絕對(duì)路徑,此模塊為webpack自帶*/
let path = require('path')
/*vue-loader,vue加載插件,使用npm install vue-loader直接安裝即可
*同時(shí)對(duì)于vue3而言需要單獨(dú)安裝@vue/compiler-sfc,vue2的話是vue-compiler
*/
let vueLoader = require('vue-loader')
/*html-webpack-plugin,模版處理插件,如果存在多個(gè)html模版就需要安裝
*直接用npm install html-webpack-plugin
*/
let htmlWebPackPlugin = require('html-webpack-plugin')
/**
*compression-webpack-plugin,這是一個(gè)可選插件,目的是為了對(duì)打包后的文件進(jìn)行壓縮,因?yàn)榇虬髸?huì)形成一個(gè)大的js文件,文件越大網(wǎng)頁(yè)打開(kāi)速度越慢。
*/
let compressionWebpackPlugin = require('compression-webpack-plugin')
module.exports = {
/*打包入口,多入口就是從這里來(lái)的,當(dāng)打包時(shí),會(huì)去找到每一個(gè)入口文件,
并根據(jù)這個(gè)文件依賴去打包,每一個(gè)入口寫(xiě)一個(gè)key-value對(duì)*/
entry: {
/*key-value格式
key就是標(biāo)識(shí)名稱,之所以寫(xiě)成 "/js/index/index" 格式是為了在打包時(shí)將文件輸出到對(duì)應(yīng)目錄,
默認(rèn)情況下,文件只會(huì)輸出到output所指定的目錄下,之后便沒(méi)有區(qū)分,這里用“/”分割就是利用輸出路徑時(shí)小漏洞形成目錄*/
/*value是要打包入口的地址,利用path.resolve處理絕對(duì)路徑問(wèn)題*/
'/js/index/index': path.resolve(__dirname, './src/entry/index.js'),
'/js/index2/index2': path.resolve(__dirname, './src/entry/index2.js')
},
/*文件輸出目錄,只能有一個(gè),[官方要求](https://www.webpackjs.com/concepts/output/)*/
output: {
/*輸出的入口文件的名稱,【name】就是剛才上面我們指定的key值,這個(gè)值不能通過(guò)外部變量或數(shù)組動(dòng)態(tài)修改*/
filename: '[name].js',
/*輸出目錄,也需要指定絕對(duì)路徑*/
path: path.resolve(__dirname, './dist')
},
/*插件配置與加載*/
plugins: [
/*加載vue文件打包插件*/
new vueLoader.VueLoaderPlugin,
/*html模版打包插件,有幾個(gè)入口就要用幾個(gè),書(shū)寫(xiě)順序與上方入口順序一致,
如果只有一個(gè),那么所有入口都會(huì)通過(guò)這一個(gè)模版打包*/
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的值對(duì)應(yīng)的是一個(gè)正則表達(dá)式*/
new compressionWebpackPlugin({
test: /\.js$|\.html$|\.css$|\.jpg$|\.png$/,
threshold: 100000,
deleteOriginalAssets: false
})
],
module:{
/*文件處理規(guī)則*/
rules: [
{
/*css處理規(guī)則,直接用css-loader插件默認(rèn)加載,css-loader插件也需要使用npm安裝*/
test: /\.css$/,
use: ['style-loader', 'css-loader']
},
{
/*vue文件加載規(guī)則*/
test: /\.vue$/,
use: ['vue-loader']
},
{
/*圖片文件處理規(guī)則,使用url-loader插件改寫(xiě)文件名并放到指定位置*/
test: /\.(jp?g|png|svg|ico)$/,
use: 'url-loader?limit=2048&name=./img/[hash:8].[name].[ext]'
}
]
}
}
方式二:vue-cli配置
vue-cli目前已不提供vue.config.js配置文件,但是我們可以手動(dòng)在package.json同級(jí)目錄創(chuàng)建一個(gè),創(chuàng)建成功后此文件將作為優(yōu)先調(diào)用對(duì)象,結(jié)構(gòu)與內(nèi)容同webpack類似(其實(shí)就是內(nèi)置的webpack配置),可參考官網(wǎng)配置解釋:配置參考 | Vue CLI:
module.exports = {
/*pages指定入口,同樣是key-value對(duì)的形式,只不過(guò)是將配置集成到了一起*/
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就代表創(chuàng)建index目錄并把index.html放到目錄下*/
filename: 'index.html',
}
}
}
vue3多頁(yè)面直接運(yùn)行
使用vue.config.js配置好后,直接使用npm run dev命令即可,對(duì)應(yīng)vue的vue-cli-service serve,運(yùn)行可根據(jù)pages定義的key值進(jìn)行路由調(diào)用頁(yè)面,key值為index那么調(diào)用格式就是/index,默認(rèn)頁(yè)面是index路由對(duì)應(yīng)頁(yè)面。如果采用webpack打包是無(wú)法直接運(yùn)行多頁(yè)面的,需要在打包后部署到服務(wù)器上。
多數(shù)情況,我們使用webpack打包單頁(yè)面應(yīng)用,有的時(shí)候也會(huì)遇到多頁(yè)面的項(xiàng)目
單入口配置
一般情況下的配置模板如下:
module.exports = {
entry: {},
output: {},
module: {},
plugins: [],
devServer: {}
}
entry
我們的入口文件一般都是JS文件
entry: {
entry: './src/entery.js'
}
output
output用來(lái)告訴webpack最后打包文件的地址和文件名稱
output: {
//打包后的文件路徑
path: path.resolve(__dirname, 'dist'),
//打包后的文件名稱
filename: 'bundle.js'
}
當(dāng)然還要引入path模塊,這個(gè)是nodejs自帶的模塊;在webpack.config.js文件的頭部引入;
const path = require('path');
打包HTML文件
需要使用html-webpack-plugin插件,它會(huì)將我們的html模板文件打包,自動(dòng)生成一個(gè)引用了所有webpack打包的文件的新的html文件:
安裝:
npm install html-webpack-plugin --save-dev
在配置文件的plugins內(nèi)加載
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'
})]
};
這將會(huì)產(chǎn)生一個(gè)包含以下內(nèi)容的文件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>
這樣一個(gè)最基本的單頁(yè)面的配置文件如下:
const path = require('path');
module.exports = {
//入口文件的配置項(xiàng)
entry: {
entry: './src/entry.js'
},
//出口文件的配置項(xiàng)
output: {
//輸出的路徑,用了Node語(yǔ)法
path: path.resolve(__dirname, 'dist'),
//輸出的文件名稱
filename: 'bundle.js'
},
//模塊:例如解讀CSS,圖片如何轉(zhuǎn)換,壓縮
module: {},
//插件,用于生產(chǎn)模版和各項(xiàng)功能
plugins: [new HtmlWebpackPlugin({
minify:{
removeAttributeQuotes: true,
collapseWhitespace: true
},
template: './src/index.html'
})]
//配置webpack開(kāi)發(fā)服務(wù)功能
devServer: {}
}
多入口配置
多入口配置的時(shí)候只需要在entry中多增加一個(gè)入口文件
輸出文件的時(shí)候?qū)ilename的值修改為[name].js,作用是根據(jù)入口文件的名稱,打包成相同的名稱,有幾個(gè)入口文件,就可以打包出幾個(gè)出口文件
同時(shí)將定義多個(gè)HtmlWebpackPlugin插件,有幾個(gè)頁(yè)面就配置幾項(xiàng)
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
}
})
],
};
#真相來(lái)了#
一、終端運(yùn)行命令 npm run build
二、打包成功的標(biāo)志與項(xiàng)目的改變,如下圖:
3、點(diǎn)擊index.html,通過(guò)瀏覽器運(yùn)行,出現(xiàn)以下報(bào)錯(cuò),如圖:
四、那么應(yīng)該如何修改呢?
具體步驟如下:
1、查看package.js文件的scripts命令
2、打開(kāi)webpack.dev.conf.js文件,找到publicPath: config.dev.assetsPublicPath,按Ctrl點(diǎn)擊,跳轉(zhuǎn)到index.js文件
3、其中dev是開(kāi)發(fā)環(huán)境,build是構(gòu)建版本,找到build下面的assetsPublicPath: '/',然后修改為assetsPublicPath: './',即“/”前加點(diǎn)。
4、終端運(yùn)行 npm run build 即可。
此時(shí)點(diǎn)擊index.html,通過(guò)瀏覽器運(yùn)行便,會(huì)發(fā)現(xiàn)動(dòng)態(tài)綁定的static的圖片找不到,故static必須使用絕對(duì)路徑。將圖片路徑修改為絕對(duì)路徑,至此,打包完成。
*請(qǐng)認(rèn)真填寫(xiě)需求信息,我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。