vue打包多个html,vue多页面应用打包配置

一直是使用vue官方提供的脚手架工具来做开发单页应用，突发奇想的想做一个多页应用的打包配置，顺便了解一下webpack的使用。花了几天时间搞定之后才发现了这篇文章《进阶| Vue 2.x + Webpack 3.x + Nodejs 多页面项目框架(上篇)》。但还是要记录一下自己搭建的过程。代码地址：https://github.com/lzy1043/webpack-multiple-pages。

代码结构

build目录下是webpack的配置文件

src/components目录下是通用的组件

src/views下是应用的页面

打包前多页面的目录结构：

打包之后的生成的项目结构：

代码里面的ESlint和babel的配置是直接使用的vue-cli中的配置。

配置多入口

1.多页面目录结构

多页应用就代表着需要有多个入口，webpack的entry支持多入口，使用entry的对象语法对每个页面设置入口。类似下面