GitHub主頁(yè)：https://github.com/452MJ/weex-multi-page-demo
前言
weex是一個(gè)跨平臺(tái)開(kāi)發(fā)框架夺姑，奉行“一次編寫纲缓，三端運(yùn)行”的理念诗鸭，不過(guò)一般公司用weex開(kāi)發(fā)APP為主溢豆，如果要在web端開(kāi)發(fā)一個(gè)網(wǎng)頁(yè)烦粒，相信還是會(huì)以Vue作為首選。不過(guò)由于公司之前的APP項(xiàng)目就已經(jīng)封裝了部分公共component及一些工具類庫(kù)蚤氏。所以我首選用weex來(lái)做公眾號(hào)H5網(wǎng)頁(yè)開(kāi)發(fā)。
查閱相關(guān)資料踊兜，比如官方demo?weex-hackernews竿滨，是一個(gè)SPA單頁(yè)面應(yīng)用。需要引入vue-router、vuex等庫(kù)于游。
解決思路
動(dòng)手修改webpack配置毁葱，把每個(gè)頁(yè)面模塊都單獨(dú)配置成index.html+index.js，把一個(gè)大SPA切割成若干個(gè)小SPA贰剥，每個(gè)HTML單獨(dú)加載對(duì)應(yīng)的js文件倾剿，以達(dá)到多頁(yè)面效果。
手把手演示
weexpack create weex-multi-page-demo
然后我們執(zhí)行npm install（PS：請(qǐng)務(wù)必在Terminal終端下輸入執(zhí)行）
npm install
安裝所需要的依賴庫(kù)蚌成，最后得到相應(yīng)的node_modules
我們先看看直接編譯出來(lái)的js文件是如何的前痘，我們執(zhí)行npm run build
npm run build
出現(xiàn)一個(gè)/dist文件夾，里面放的就是我們編寫的.vue文件后run build后對(duì)應(yīng)的的js文件
接著執(zhí)行npm run serve看看具體的效果
npm run serve
現(xiàn)在我們想配置出對(duì)應(yīng)的html文件担忧，就需要著手修改webpack芹缔，我們打開(kāi)wevpack.config.js
要自動(dòng)生成.html文件，我們需要用到webpack的一個(gè)plugin插件瓶盛，html-webpack-plugin最欠。引入插件后代碼如圖
每當(dāng)我們需要生成一個(gè).html文件，都需要往plugins中添加一個(gè)html-webpack-plugin惩猫，所以記得用let來(lái)定義plugins芝硬。
Weex的工程是通過(guò)webpack.config.js中的walk方法來(lái)遍歷src文件夾中的.vue文件，我們可以通過(guò)對(duì)walk()進(jìn)行修改轧房，在遍歷.vue文件的同時(shí)拌阴，添加對(duì)應(yīng)的html-webpack-plugin，未作修改前的walk()方法如圖
可以看到锯厢，當(dāng)檢索到.vue文件的時(shí)候皮官，就會(huì)往entry中新增一個(gè)對(duì)象，同理我們可以在檢索到.vue文件的時(shí)候便往plugins中新增一個(gè)html-webpack-plugin
其中用到的模板template.html 如圖
然后我們npm run build
npm run build
生成的.html中多了一行代碼
初步見(jiàn)成果实辑，url中已經(jīng)看不到單頁(yè)面的#了捺氢，是一個(gè)獨(dú)立的html頁(yè)面
然后我們又一次添加多個(gè)不同的頁(yè)面試試
可以看到html-webpack-plugin的配置還不完善，導(dǎo)致模板生成的.html把所有.js都引用了剪撬，且.html的命名與.vue的命名相關(guān)聯(lián)摄乒，比如ccc.vue生成的便是ccc.html。接下來(lái)我們?cè)賰?yōu)化一下html-webpack-plugin的配置残黑，修改如下
chunks 選項(xiàng)的作用主要是針對(duì)多入口(entry)文件馍佑。當(dāng)你有多個(gè)入口文件的時(shí)候，對(duì)應(yīng)就會(huì)生成多個(gè)編譯后的 js 文件梨水。那么 chunks 選項(xiàng)就可以決定是否都使用這些生成的 js 文件拭荤。
然后我們?cè)賜pm run build一遍，看看生成的.html文件
可以看到三個(gè)不同的頁(yè)面都引用自己的.js文件
接下來(lái)我們?cè)賰?yōu)化一下疫诽，比如說(shuō)舅世，每個(gè)頁(yè)面模塊我只想index.vue才生成index.html旦委，ccc.vue則不生成html。那我們應(yīng)該如何寫呢雏亚？很簡(jiǎn)單缨硝，如圖
npm run build后
可以看到c頁(yè)面中沒(méi)有index.vue，所以不會(huì)生成對(duì)應(yīng)的.html
最后我們對(duì)webConfig配置罢低，不生成xx.web.js文件
最終的dist文件夾內(nèi)容如下
接下來(lái)我們就可以直接通過(guò)url的形式來(lái)訪問(wèn)a頁(yè)面與b頁(yè)面查辩，無(wú)需通過(guò)配置復(fù)雜的的vue-router，無(wú)需綁定vuex來(lái)管理數(shù)據(jù)
至此网持，一個(gè)簡(jiǎn)單的weex的webpack多頁(yè)面配置已經(jīng)分析完成宜岛。
不足的地方
因?yàn)閠emplate.html的公共引用庫(kù)的原因
<script src='../../../node_modules/vue/dist/vue.runtime.min.js'></script>
所以每個(gè)頁(yè)面都必須寫成/src/page/xx/index.vue（后面發(fā)現(xiàn)只要引用cdn上的js就可以去掉丑陋的../../../了）
<script src='https://cdn.jsdeivr.net/npm/vue@2.4.3/dist/vue.runtime.min.js'></script>
