GitHub主页：https://github.com/452MJ/weex-multi-page-demo

前言

weex是一个跨平台开发框架，奉行“一次编写，三端运行”的理念，不过一般公司用weex开发APP为主，如果要在web端开发一个网页，相信还是会以Vue作为首选。不过由于公司之前的APP项目就已经封装了部分公共component及一些工具类库。所以我首选用weex来做公众号H5网页开发。

查阅相关资料，比如官方demo weex-hackernews，是一个SPA单页面应用。需要引入vue-router、vuex等库。

动手修改webpack配置，把每个页面模块都单独配置成index.html+index.js，把一个大SPA切割成若干个小SPA，每个HTML单独加载对应的js文件，以达到多页面效果。

weexpack create weex-multi-page-demo

weexpack create weex-multi-page-demo

新建工程的目录结构

然后我们执行npm install（PS：请务必在Terminal终端下输入执行）

npm install

安装所需要的依赖库，最后得到相应的node_modules

我们先看看直接编译出来的js文件是如何的，我们执行npm run build

npm run build

出现一个/dist文件夹，里面放的就是我们编写的.vue文件后run build后对应的的js文件

npm run build的结果

接着执行npm run serve看看具体的效果

npm run serve

熟悉的hello world

现在我们想配置出对应的html文件，就需要着手修改webpack，我们打开wevpack.config.js

未作修改前的webpack.config.js

要自动生成.html文件，我们需要用到webpack的一个plugin插件，html-webpack-plugin。引入插件后代码如图

引入HtmlWebpackPlugin

每当我们需要生成一个.html文件，都需要往plugins中添加一个html-webpack-plugin，所以记得用let来定义plugins。

Weex的工程是通过webpack.config.js中的walk方法来遍历src文件夹中的.vue文件，我们可以通过对walk()进行修改，在遍历.vue文件的同时，添加对应的html-webpack-plugin，未作修改前的walk()方法如图

walk()方法

可以看到，当检索到.vue文件的时候，就会往entry中新增一个对象，同理我们可以在检索到.vue文件的时候便往plugins中新增一个html-webpack-plugin

添加html-webpack-plugin

其中用到的模板template.html 如图

template.html

然后我们npm run build

npm run build

生成的index.html

生成的.html中多了一行代码

模板插入的

所以每个页面都必须写成/src/page/xx/index.vue（后面发现只要引用cdn上的js就可以去掉丑陋的../../../了）