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 相关文章推荐
Javascript的IE和Firefox兼容性汇编
Jul 01 Javascript
js 禁用浏览器的后退功能的简单方法
Dec 10 Javascript
jQuery语法总结和注意事项小结
Nov 11 Javascript
js使下拉列表框可编辑不止是选择
Dec 12 Javascript
浅谈JavaScript中的作用域和闭包问题
Jul 07 Javascript
深入理解逻辑表达式的用法 与或非的用法
Jun 06 Javascript
JS日期对象简单操作(获取当前年份、星期、时间)
Oct 26 Javascript
原生js实现日期计算器功能
Feb 17 Javascript
JS回调函数基本定义与用法实例分析
May 24 Javascript
JavaScript反弹动画效果的实现代码
Jul 13 Javascript
Nginx 配置多站点vhost 的方法
Jan 07 Javascript
微信小程序日历弹窗选择器代码实例
May 09 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 中关于ord($str)&amp;gt;0x80的详细说明
2012/09/23 PHP
浅析application/x-www-form-urlencoded和multipart/form-data的区别
2014/06/22 PHP
php校验表单检测字段是否为空的方法
2015/03/20 PHP
PHP指定截取字符串中的中英文或数字字符的实例分享
2016/03/18 PHP
微信支付开发维权通知实例
2016/07/12 PHP
PHP生成二维码与识别二维码的方法详解【附源码下载】
2019/03/07 PHP
阿里对象存储OSS在laravel框架中的使用方法
2019/10/13 PHP
Extjs中常用表单介绍与应用
2010/06/07 Javascript
JS.elementGetStyle(element, style)应用示例
2013/09/24 Javascript
js和jquery设置disabled属性为true使按钮失效
2014/08/07 Javascript
Jquery日期选择datepicker插件用法实例分析
2015/06/08 Javascript
jQuery easyui刷新当前tabs的方法
2016/09/23 Javascript
BootStrap实现手机端轮播图左右滑动事件
2016/10/13 Javascript
WebView启动支付宝客户端支付失败的问题小结
2017/01/11 Javascript
原生javascript移动端滑动banner效果
2017/03/10 Javascript
微信小程序 配置顶部导航条标题颜色的实现方法
2017/09/20 Javascript
浅谈React和Redux的连接react-redux
2017/12/04 Javascript
Python 判断 有向图 是否有环的实例讲解
2018/02/01 Python
解决Pandas to_json()中文乱码,转化为json数组的问题
2018/05/10 Python
树莓派使用python-librtmp实现rtmp推流h264的方法
2019/07/22 Python
Keras使用ImageNet上预训练的模型方式
2020/05/23 Python
CSS3 函数技巧 用css 实现js实现的事情(clac Counters Tooltip)
2017/08/15 HTML / CSS
突袭HTML5之Javascript API扩展4—拖拽(Drag/Drop)概述
2013/01/31 HTML / CSS
Nike瑞典官方网站:Nike.com (SE)
2018/11/26 全球购物
Beach Bunny Swimwear官网:设计师泳装和性感比基尼
2019/03/13 全球购物
linux面试题参考答案(7)
2014/07/24 面试题
应聘收银员个人的求职信
2013/11/30 职场文书
工程管理专业个人求职信范文
2013/12/07 职场文书
电脑饰品店的创业计划书
2014/01/21 职场文书
宣传部部长竞选演讲稿
2014/04/26 职场文书
2014领导干部四风问题查摆思想汇报
2014/09/13 职场文书
护士求职自荐信范文
2015/03/04 职场文书
2016大学自主招生推荐信范文
2015/03/23 职场文书
会计主管竞聘书
2015/09/15 职场文书
大学生安全教育心得体会
2016/01/15 职场文书
创业计划书之花店
2019/09/20 职场文书