Vue多页面开发配置

最近在做的项目都是SPA的单页面应用，但实际工作中，单页面并不一定符合业务需求，比如在现有H5项目基础上一步一步将众多页面升级至vue框架，这就需要多页面开发。这种情况下就体现出了Vue所谓渐进式框架的优势，可以与现有项目进行整合。接下来就说一下多页面的配置：

假设已经安装好了node，并且已经搭建好了基于vue-cli的脚手架。

第一步：新建所要增加的.html、.vue、.js文件，如下图所示：

这里为了演示清晰，增加了one.html、two.html以及对应的vue和js文件。

第二步：进入\build\webpack.base.conf.js目录下，在module.exports对象下，找到entry，在那里配置添加多个入口：

第三步：对开发环境进行修改，进入\build\webpack.dev.conf.js文件，在module对象里找到plugins，下面写法如下：

在chunks里的app、one、two指的是webpack.base.conf.js的entry那里与之对应的变量名。chunks的作用是每次编译、运行时每一个入口都会对应一个entry，如果没写则引入所有页面的资源。

第四步：对编译环境进行配置。进入\config\index.js文件，在build里增加相对应的打包文件：

第五步：打开/build/webpack.prod/conf.js文件，在plugins那里找到HTMLWebpackPlugin，添加如下代码：

最后就是one.html，one.js，one.vue的写法了，这个参照初始项目中的index.html，main.js，app.vue就可以了，然后app.vue里就可以这样写了：

代码基本上都可以从项目文件里面复制粘贴到，然后加以修改，祝大家学习愉快！

关注我的头条号，分享更多的技术学习文章，我自己是一名从事了多年开发的web前端老程序员，目前辞职在做自己的web前端私人定制课程，今年年初我花了一个月整理了一份最适合2019年学习的web前端学习干货，各种框架都有整理，送给每一位前端小伙伴，想要获取的可以关注我的头条号并在后台私信我：前端，即可免费获取。