vue 如何创建一个多页面应用持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第2天，点击查看活动详

持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第2天，点击查看活动详情

简介

多页面应用

MPA多页面应用（MultiPage Application），指有多个独立页面的应用，每个页面必须重复加载js、css等相关资源。多页应用跳转，需要整页资源刷新。

多页面应用的优缺点分别是什么？

多页面和单页面的最大区别是需要更多的页面和更多的栏目来承载不同页面的链接。

优点

第一点与单个页面相反，它具有更强的可伸缩性，可以添加更多的子页面，也可以添加层级，三级或者四级，加上搜索框。
早在20世纪90年代就有多页面，用户已经熟悉了多页面操作。
SEO功能和更突出的优势，它比单页面承载的内容更多，包括搜索引擎和营销策略。

缺点

这就是工作量的问题，早期页面的设计、前端框架的构建和后端的开发，还有后期维护，工作量相当大。在选择单页面或多页面网站时，要考虑内容的容量和工作量，并做出合理的衡量。

搭建一个多页面应用

webpack配置

第一步 webpack配置

进入webpack.base.conf.js目录下，在module.exports的域里，找到entry，在那里配置添加多个入口：

// 文件路径更具自己的实际情况进行配置,我这仅是 demo
entry: {
    app: './src/view/main.js',
    one: './src/view/js/one.js',
    two: './src/view/js/two.js'
  },

或者是vue.config.js

module.exports={
    pages:{
        app:{
            entry:"./src/view/index/main.js",
            template:"./src/view/index/index.html",
            filename:"index.html",
            title:"app-name"
        },
        one:{
            entry:"./src/view/one/main.js",
            template:"./src/view/one/index.html",
            filename:"two-name.html",
            title:"one-name"
        },
        two:{
            entry:"./src/view/two/main.js",
            template:"./src/view/two/index.html",
            filename:"two-name.html",
            title:"two-name"
        },
    }
}

第二步配置目录结构

配置相应的目录结构，用来存放页面信息

第三步修改各个页面里面的路由配置

多页面应用各应用之间路由隔离，需要单独配置

第四步

验证应用是否成功，访问地址localhost:8080/one.html/#/index

vue 如何创建一个多页面应用

简介