最近在做的项目都是SPA的单页面应用,但实际工作中,单页面并不一定符合业务需求,比如在现有H5项目基础上一步一步将众多页面升级至vue框架,这就需要多页面开发。这种情况下就体现出了Vue所谓渐进式框架的优势,可以与现有项目进行整合。接下来就说一下多页面的配置:
假设已经安装好了node,并且已经搭建好了基于vue-cli的脚手架。
第一步:新建所要增加的.html、.vue、.js文件,如下图所示:
这里为了演示清晰,增加了one.html、以及对应的vue和js文件。
第二步:进入\build\web目录下,在module.exports对象下,找到entry,在那里配置添加多个入口:
第三步:对开发环境进行修改,进入\build\web文件,在module对象里找到plugins,下面写法如下:
在chunks里的app、one、two指的是web的entry那里与之对应的变量名。chunks的作用是每次编译、运行时每一个入口都会对应一个entry,如果没写则引入所有页面的资源。
第四步:对编译环境进行配置。进入\config\index.js文件,在build里增加相对应的打包文件:
第五步:打开/build文件,在plugins那里找到HTMLWebpackPlugin,添加如下代码:
最后就是one.html,one.js,one.vue的写法了,这个参照初始项目中的index.html,main.js,a就可以了,然后a里就可以这样写了:
代码基本上都可以从项目文件里面复制粘贴到,然后加以修改,祝大家学习愉快!
关注我的头条号,分享更多的技术学习文章,我自己是一名从事了多年开发的web前端老程序员,目前辞职在做自己的web前端私人定制课程,今年年初我花了一个月整理了一份最适合2019年学习的web前端学习干货,各种框架都有整理,送给每一位前端小伙伴,想要获取的可以关注我的头条号并在后台私信我:前端,即可免费获取。