Vue-cli3多页面配置详解


Posted in Javascript onMarch 22, 2020

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
};

创建好vue.config.js之后,删除App.vue和main.ts(main.js)文件,并在views文件夹下创建两个新的文件夹index和about,可以使用其他名称。这里的文件夹用来分散多个页面内容。

在index文件夹下面创建index.html、index.vue、main.ts,about文件也是如此。

index.html

<!DOCTYPE html>
<html lang="en">
 <head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <link rel="icon" href="<%= BASE_URL %>favicon.ico" rel="external nofollow" >
  <title><%= htmlWebpackPlugin.options.title %></title>
 </head>
 <body>
  <noscript>
   <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
  </noscript>
  <div id="app"></div>
  <!-- built files will be auto injected -->
 </body>
</html>

index.vue

<template>
  <div id="app">
    <a href="about.html" rel="external nofollow" rel="external nofollow" >About</a>
    <h1>Index</h1>
  </div>
</template>

<script>
export default {
  name: 'page2'
}
</script>

<style>
</style>

main.ts

import Vue from 'vue'
import App from './index.vue'

Vue.config.productionTip = false

new Vue({
 render: h => h(App)
}).$mount('#app')

仔细看代码代码貌似与之前的单页面应用并没有任何区别,但是有一点需要注意的是,一旦需要跳转到另一个页面的时候,需要使用a标签进行跳转<a href="about.html" rel="external nofollow" rel="external nofollow" >About</a>。

爬坑内容

  1. 若想在多页面中使用Vue-Router也是可以的,只需要在对应的页面中添加Router的实例就可以了,需要注意的是一定要当前页面Router的实例只包含当前页面的路由。
  2. 在使用store的时候需要注意的是由于当前store只与当前页面的实例中,当发生页面跳转之后,则store数据无法进行共享,但是在当前页面中使用Router跳转的路由,仍然是可以共享store的数据的。

总结

其实无论多页面还是单页面其实都是一种开发形式,我们只需要针对不同的需求和项目的复杂程度采取对应的措施,即技术选型,无论是使用哪种都有其利弊,没有必要一味的使用某一种模式,然而这样可能限制了我们的开发思维。

到此这篇关于Vue-cli3多页面配置详解的文章就介绍到这了,更多相关Vue-cli3 多页面内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
js性能优化 如何更快速加载你的JavaScript页面
Mar 17 Javascript
DOM操作一些常用的属性汇总
Mar 13 Javascript
最简单的JavaScript验证整数、小数、实数、有效位小数正则表达式
Apr 17 Javascript
javascript实现点击提交按钮后显示loading的方法
Jul 03 Javascript
javascript动态生成树形菜单的方法
Nov 14 Javascript
原生JS实现轮播效果+学前端的感受(防止走火入魔)
Aug 21 Javascript
JSON键值对序列化和反序列化解析
Jan 24 Javascript
教你快速搭建Node.Js服务器的方法教程
Mar 30 Javascript
bootstrap模态框示例代码分享
May 17 Javascript
深入理解vue $refs的基本用法
Jul 13 Javascript
vue-cli开发环境实现跨域请求的方法
Apr 07 Javascript
如何在 ant 的table中实现图片的渲染操作
Oct 28 Javascript
redux处理异步action解决方案
Mar 22 #Javascript
JS+CSS实现3D切割轮播图
Mar 21 #Javascript
vue-autoui自匹配webapi的UI控件的实现
Mar 20 #Javascript
jQuery实现中奖播报功能(让文本滚动起来) 简单设置数值即可
Mar 20 #jQuery
微信小程序保持session会话的方法
Mar 20 #Javascript
微信小程序后端无法保持session的原因及解决办法问题
Mar 20 #Javascript
js 闭包深入理解与实例分析
Mar 19 #Javascript
You might like
php设计模式之命令模式使用示例
2014/03/02 PHP
PHP简单实现二维数组赋值与遍历功能示例
2017/10/19 PHP
微信企业转账之入口类分装php代码
2018/10/01 PHP
PHP中Static(静态)关键字功能与用法实例分析
2019/04/05 PHP
jQuery帮助之CSS尺寸(五)outerHeight、outerWidth
2009/11/14 Javascript
JS获取url链接字符串 location.href
2013/12/23 Javascript
jQuery定义背景动态切换效果的方法
2015/03/23 Javascript
jquery实现用户打分评分特效
2015/05/28 Javascript
jquery弹出框插件jquery.ui.dialog用法分析
2016/08/20 Javascript
AngularJs  Creating Services详解及示例代码
2016/09/02 Javascript
详解Javascript中prototype属性(推荐)
2016/09/03 Javascript
JS中如何实现点击a标签返回页面顶部的问题
2017/01/19 Javascript
ES6新特性之Symbol类型用法分析
2017/03/31 Javascript
jQuery实现按比例缩放图片的方法
2017/04/29 jQuery
解决angularjs中同步执行http请求的方法
2018/08/13 Javascript
微信小程序实现授权登录
2019/05/15 Javascript
iview的table组件自带的过滤器实现
2019/07/12 Javascript
vue css 引入asstes中的图片无法显示的四种解决方法
2020/03/16 Javascript
JavaScript判断数据类型有几种方法及区别介绍
2020/09/02 Javascript
JS实现斐波那契数列的五种方式(小结)
2020/09/09 Javascript
[01:59][TI9趣味视频] 全明星赛奖励
2019/08/23 DOTA
[55:26]DOTA2-DPC中国联赛 正赛 Aster vs LBZS BO3 第一场 2月23日
2021/03/11 DOTA
python开发之tkinter实现图形随鼠标移动的方法
2015/11/11 Python
对sklearn的使用之数据集的拆分与训练详解(python3.6)
2018/12/14 Python
使用tensorflow实现矩阵分解方式
2020/02/07 Python
html5利用canvas实现颜色容差抠图功能
2019/12/23 HTML / CSS
Europcar澳大利亚官网:全球汽车租赁领域的领导者
2019/03/24 全球购物
HQhair美国/加拿大:英国化妆品、美容及美发产品商城
2019/04/15 全球购物
Myprotein西班牙官网:欧洲第一大运动营养品牌
2020/02/24 全球购物
就业表自我评价分享
2014/02/06 职场文书
2014年扶贫工作总结
2014/11/18 职场文书
故宫的导游词
2015/01/31 职场文书
敬老院义诊活动总结
2015/05/07 职场文书
2015年全民创业工作总结
2015/07/23 职场文书
原生JS中应该禁止出现的写法
2021/05/05 Javascript
Python+OpenCV实现在图像上绘制矩形
2022/03/21 Python