Vue-cli3多页面配置详解_vue-cli多页面,vue-cli多页面资源-CSDN文库

11 浏览量 2020-11-21 03:18:09 上传评论收藏 71KB PDF 举报

资源推荐

资源详情

资源评论

Vue-cli3多页面配置详解多页面配置详解

Vue-cli3发布已经好长时间了，笔者也在一直使用，由于公司业务需要要使用多页面配置，于是花时间研究了一下Vue-cli3如

何配置多页面。由于Vue-cli3相比之前的版本做了很大的改动，在研究过程中也遇到一些问题。

对于Vue-cli3创建项目这里就不做太多的赘述了，毕竟不属于本文内容，有关相关博客也有很多，大家可以自行Google一下就

好了。

多页面应用多页面应用(mpa)与单页面应用与单页面应用(spa)优缺点优缺点

在项目中我们用到的大多数都是单页面应用(spa)，对于多页面可能用到的比较少一些，具体还是要根据具体的业务情况，去

觉得自己的技术选型。具体应该如何应用可以酌情考虑。

单页面应用单页面应用(spa)

单页面：单页面，简单的理解就是一种结构布局很简单的静态页面。 ——节选自百度百科

通俗的的来讲单页面就是只有一个html页面，所有跳转方式都是通过组件切换完成的。正如我们平时所用的Vue一样，但是

Vue同样借助了Vue-Router完成了对页面(组件)的切换来实现页面之间的跳转(即组件间的切换)。

单页面的到来给前端带来很大的好处，由于资源只需要加载所以页面之间跳转流畅，实现了组件化的的开发，组件的重复利

用，大大增加了开发的速度以及降低了项目的维护成本。

单页面应用既然有诸多的好处，当然同样也会带来很多的一些弊端，由于单页面应用在初次访问时需要加载全部的资源所以，

首屏的加载速度会变得有一些慢。

多页面应用多页面应用(mpa)

多页面：整个项目有多个html，所有跳转方式都是页面之间相互跳转的。

多页面与与传统的开发类似，除当前页面的路由以外都是使用a标签进行跳转的。当前路由仍然是使用Vue-Router进行跳转。

多页面应用由于只会加载当前访问页面所需要的资源，所以首屏加载速度很快，只加载本页所使用的css、js，而且多页面应

用相比单页面应用SEO要比单页面应用要好很多的。

多页面由于只会获取当前页面所需要的资源，那么这样在进行页面之间跳转的时候导致会重新获取和加载资源，导致页面之间

的跳转回变慢一些。

项目搭建项目搭建

首先使用Vue-cli3脚手架创建一个Vue项目，创建完项目之后在根目录中创建vue.config.js，用来增加Vue的webpack配置项。

let glob = require('glob');

//配置pages多页面获取当前文件夹下的html和js

function getEntry(globPath) {

let entries = {}, tmp, htmls = {};

// 读取src/pages/**/底下所有的html文件

glob.sync(globPath+'html').forEach(function(entry) {

tmp = entry.split('/').splice(-3);

htmls[tmp[1]] = entry

})

// 读取src/pages/**/底下所有的js文件

glob.sync(globPath+'ts').forEach(function(entry) {

tmp = entry.split('/').splice(-3);

entries[tmp[1]] = {

entry,

// 当前目录没有有html则以共用的public/index.html作为模板

template: htmls[tmp[1]] ? htmls[tmp[1]] : 'index.html',

// 以文件夹名称.html作为访问地址

filename:tmp[1] + '.html'

};

});

return entries;

};

let htmls = getEntry('./src/views/**/*.');

module.exports = {

pages:htmls,

publicPath: './', // 解决打包之后静态文件路径404的问题

outputDir: 'output', // 打包后的文件夹名称，默认dist

devServer: {

open: true, // npm run serve 自动打开浏览器

index: '/index.html' // 默认启动页面

},

productionSourceMap: false

本内容试读结束，登录后可阅读更多

下载后可阅读完整内容，剩余1页未读，立即下载

内容反馈

weixin_38552239

粉丝: 13
资源: 955

最新资源

资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！点击此处反馈

feedback-tip