這篇文章主要介紹了vue-cli+webpack如何優(yōu)化多頁(yè)面實(shí)例配置，具有一定借鑒價(jià)值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。
10多年建站經(jīng)驗(yàn)， 成都網(wǎng)站制作、網(wǎng)站設(shè)計(jì)客戶的見證與正確選擇。創(chuàng)新互聯(lián)提供完善的營(yíng)銷型網(wǎng)頁(yè)建站明細(xì)報(bào)價(jià)表。后期開發(fā)更加便捷高效，我們致力于追求更美、更快、更規(guī)范。
vue+webpack是否有多頁(yè)面
目前使用vue來(lái)做項(xiàng)目，估計(jì)大部分都是單頁(yè)面（SPA）應(yīng)用，一個(gè)輕型的 MVVM 框架，誰(shuí)用了MVVM框架，就再也回不去JQ時(shí)代了，哈哈。
在手機(jī)端的項(xiàng)目，使用vue + vue-router是high到爆，不僅僅是我們開發(fā)的而言，最主要的用戶體檢也是開足馬力，體檢感杠杠的。
那問(wèn)題來(lái)了，使用vue+webpack的單頁(yè)面是爽到爆，那如果是多頁(yè)面也能不能high到爆呢？那當(dāng)然呀，必須的必，vue、webpack的忠粉（哈哈，好像這忠粉不關(guān)系到多頁(yè)面的）。
在谷歌找vue 多頁(yè)面，實(shí)例還是比較少，功夫不負(fù)有心人，在yaoyao1987那找到了，具體可以到這個(gè)yaoyao1987 github，非常感謝yaoyao1987童鞋，今天要講的內(nèi)容是基于yaoyao1987童鞋的多頁(yè)面實(shí)例上再優(yōu)化的。
優(yōu)化了點(diǎn)啥
github地址：https://github.com/bluefox1688/vue-cli-multi-page
優(yōu)化的內(nèi)容
我們先來(lái)講講，具體我們優(yōu)化了什么內(nèi)容。
增加全局統(tǒng)一使用的模塊Lib.js庫(kù)，可能這里看不明白，不要緊，后面會(huì)講到。
支持字體圖標(biāo)
增加干凈的頁(yè)面、組件的模板，復(fù)制即可以使用。
去掉多余的代碼注釋，坑了我的注釋，別再坑人了
構(gòu)建時(shí)，增加對(duì)css打包的支持
提取公共模塊........
使用方法
# 安裝 npm install # 調(diào)試環(huán)境 serve with hot reload at http://localhost:8083/module/login.html npm run dev # 生產(chǎn)環(huán)境 build for production with minification npm run build
本地默認(rèn)訪問(wèn)端口為8083，需要更改的童鞋請(qǐng)到項(xiàng)目根目錄文件config.js修改。
目錄結(jié)構(gòu)
webpack |---build |---src |---assets 資源 |---css.css css |---img 圖片文件 |---font/ 字體圖標(biāo) |---components 組件 |---Button.vue 按鈕組件 |---module-head.vue head組件 |---module各個(gè)頁(yè)面模塊 |---login 登陸模塊 |---login.html |---login.js |---app.vue |---welcome 歡迎頁(yè)模塊 |---welcome.html |---welcome.js |---app.vue
從目錄結(jié)構(gòu)上，各種組件、頁(yè)面模塊、資源等都按類新建了文件夾，方便我們儲(chǔ)存文件。
其實(shí)我們所有的文件，最主要都是放在module文件夾里，以文件夾名為html的名稱。
例如
|---login 登陸模塊 |---login.html |---login.js |---app.vue
就是我們?cè)L問(wèn)時(shí)的地址：http://localhost:8083/module/login.html
這里一定要記住，在module里下級(jí)文件夾，一個(gè)文件夾就是一個(gè)html，js、vue template 都統(tǒng)一放在當(dāng)前文件夾里，當(dāng)然你也可以繼續(xù)放其他的資源，例如css、圖片等，webpack會(huì)打包到當(dāng)前頁(yè)面里。
如果項(xiàng)目不需要這個(gè)頁(yè)面了，可以直接把這個(gè)文件夾直接刪除掉，干凈項(xiàng)目，干活也開心。
像以前我們傳統(tǒng)開發(fā)項(xiàng)目，所有的圖片都習(xí)慣放在images里，當(dāng)項(xiàng)目有改動(dòng)時(shí)，有些圖片等資源用不上了，但還占著坑位，雖
然現(xiàn)在的硬件容量大到驚人，但我們應(yīng)該還是要養(yǎng)到一個(gè)良好的習(xí)慣。
當(dāng)前頁(yè)面的開發(fā)在 這里就是我想講的關(guān)于優(yōu)化的第一點(diǎn)提到的全局模塊庫(kù)。 當(dāng)然也有童鞋問(wèn)呀，會(huì)不會(huì)每個(gè)頁(yè)面都會(huì)把這些全局模塊庫(kù)都打包在當(dāng)前頁(yè)面，那JS文件體積大到驚人。 哎呀，你當(dāng)webpack是二貨的呀， 在 為了更好的在全局調(diào)用模塊里，知道哪個(gè)模塊的作用是什么，另外在寫代碼時(shí)更能快速查找到JS文件，我區(qū)分了配置文件和共用事件文件，即conf、common，下面說(shuō)下具體的用途。 當(dāng)然，你也可以不像這樣區(qū)分不同的JS文件，刪除也沒有影響的，具體也要看項(xiàng)目的需要而定，不能死讀書。 另外，如果想要干凈的頁(yè)面模塊模板，可以到根目錄的 組件的使用 組件（Component）是 vue.js 最強(qiáng)大的功能之一，當(dāng)你發(fā)現(xiàn)使用組件可以減少造輪子里，你會(huì)深深的愛上它。 然后記得在*.vue注冊(cè)導(dǎo)入的組件，要不然會(huì)影響使用。 如果想要干凈的組件模板，可以到根目錄的tpl里找到components_tpl的Hello.vue文件，復(fù)制粘貼到components目錄下馬上就可以進(jìn)行開發(fā)了。 圖標(biāo)字體 在yaoyao1987童鞋里，是沒有打包構(gòu)造圖標(biāo)字體的代碼邏輯，這也是我優(yōu)化上去的一部分，建議使用 在 構(gòu)建代碼說(shuō)明 那我們使用的是vue-cli的手腳架，用過(guò) 這里還要做一個(gè)特別說(shuō)明，我們每次更新資源文件，為了去緩存，都會(huì)給文件生成hash值，例如： 這兩者都是為了去緩存，唯一的區(qū)別的生成的文件名不一樣，有些項(xiàng)目，為了可以能出嚴(yán)重BUG時(shí)第一時(shí)間回滾，以 另一種方式，就是以 我在 感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享的“vue-cli+webpack如何優(yōu)化多頁(yè)面實(shí)例配置”這篇文章對(duì)大家有幫助，同時(shí)也希望大家多多支持創(chuàng)新互聯(lián)，關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，更多相關(guān)知識(shí)等著你來(lái)學(xué)習(xí)!app.vue里，打開后你就會(huì)看到很熟悉的、
webpack會(huì)自動(dòng)幫你處理好的，會(huì)把在*.vue里的import Lib from 'assets/Lib.js'的庫(kù)自動(dòng)提取出來(lái)，放到一個(gè)全局的JS文件里，這就是自動(dòng)構(gòu)造的神奇呀，省心省電，媽媽再也不用擔(dān)心我做重復(fù)的工作了。Lib.js里，我們也看到有兩個(gè)導(dǎo)入的JS文件，主要來(lái)做什么的呢？# 儲(chǔ)存站點(diǎn)的配置，例如web的名稱、LOGO地址等
import C from 'assets/conf';
# 導(dǎo)入全局的共用事件，例如在微信的JS SDK初始化，每個(gè)頁(yè)面都要分享，都需要初始化的，一次調(diào)用，全局使用，棒！！
import M from 'assets/common';
tpl里復(fù)制module_tpl整個(gè)文件夾，然后粘貼到src/module目錄下馬上就可以進(jìn)行開發(fā)了，開發(fā)之前記得在cmd里npm run dev跑一遍，新增頁(yè)面都要重新dev一遍。module我們就講到這里，下面我們來(lái)講講組件的調(diào)用，最愛組件了。
我們的組件都是放在components目錄下的，調(diào)用組件的方法也很簡(jiǎn)單。import Button from 'components/Button';
import Button from 'components/Button';
export default {
data() {
return {
}
},
components: {
# 在這里注冊(cè)組件，不注冊(cè)組件的話，是無(wú)法使用的。
Button
}
}iconfont圖標(biāo)（http://www.iconfont.cn） ，強(qiáng)大到無(wú)所不能，可以到iconfont下載自己想要的圖標(biāo)字體，記得是把文件放到\src\assets\font文件夾里。webpack會(huì)自動(dòng)打包的，無(wú)需理會(huì)，另外還有一點(diǎn)，iconfont提供的css文件，復(fù)制到\src\assets\css.css文件即可，要不然沒有效果哈。*.vue里使用調(diào)用就行了。vue+cli的朋友知道主要構(gòu)建代碼都放在根目錄build下，vue多頁(yè)面主要修改了這三個(gè)JS文件webpack.base.conf.js、webpack.dev.conf.js、webpack.prod.conf.js# 【webpack.base.conf.js】主要是構(gòu)建的全局設(shè)置，主要是增加了以下代碼，已經(jīng)增加在JS文件里，這里只是做一個(gè)補(bǔ)充說(shuō)明，具體請(qǐng)看`build/webpack.base.conf.js`。
var entries = getEntry('./src/module/**/*.js'); // 獲得入口js文件
var chunks = Object.keys(entries);
plugins: [
// 提取公共模塊
new webpack.optimize.CommonsChunkPlugin({
name: 'vendors', // 公共模塊的名稱
chunks: chunks, // chunks是需要提取的模塊
minChunks: chunks.length
}),
// 配置提取出的樣式文件
new ExtractTextPlugin('css/[name].css')
]
function getEntry(globPath) {
var entries = {},
basename, tmp, pathname;
glob.sync(globPath).forEach(function (entry) {
basename = path.basename(entry, path.extname(entry));
tmp = entry.split('/').splice(-3);
pathname = tmp.splice(0, 1) + '/' + basename; // 正確輸出js和html的路徑
entries[pathname] = entry;
});
return entries;
}文件名+hash的方式儲(chǔ)存，每次生成都不會(huì)覆蓋之前的代碼，以方便查BUG或者回滾。文件名+?hash的方式儲(chǔ)存，每次都會(huì)覆蓋之前生成的資源，方便在某些特殊項(xiàng)目使用。webpack.base.conf.js也已經(jīng)注釋說(shuō)明了。module.exports = {
entry: entries,
output: {
path: config.build.assetsRoot,
publicPath: config.build.assetsPublicPath,
/* ---- 生成的例子 vendors.61714a310523a3df9869.js --- */
//filename: '[name].[hash].js'
/* ---- 生成的例子 vendors.js?f3aaf25de220e214f84e --- */
filename: '[name].js'
}
}
文章題目：vue-cli+webpack如何優(yōu)化多頁(yè)面實(shí)例配置
鏈接地址：http://weahome.cn/article/pjoppj.html
重慶分公司
重慶分公司
