您的位置 首页 > 数码极客

「多页面应用如何构建」如何使应用不在页面显示…

最近在做的项目都是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前端学习干货,各种框架都有整理,送给每一位前端小伙伴,想要获取的可以关注我的头条号并在后台私信我:前端,即可免费获取。

责任编辑: 鲁达

1.内容基于多重复合算法人工智能语言模型创作,旨在以深度学习研究为目的传播信息知识,内容观点与本网站无关,反馈举报请
2.仅供读者参考,本网站未对该内容进行证实,对其原创性、真实性、完整性、及时性不作任何保证;
3.本站属于非营利性站点无毒无广告,请读者放心使用!

“多页面应用如何构建,如何使应用不在页面显示,单页面应用如何实现,如何在页面隐藏应用,如何在手机页面隐藏应用,如何固定应用页面”边界阅读