言

現(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ù)器上。

ue項(xiàng)目打包

一、終端運(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ì)路徑，至此，打包完成。