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 相关文章推荐
jquery 新浪网易的评论块制作
Jul 01 Javascript
javascript 防止刷新,后退,关闭
Aug 07 Javascript
浅析JavaScript中的CSS属性及命名规范
Nov 28 Javascript
jquery获取颜色在ie和ff下的区别示例介绍
Mar 28 Javascript
js控制输入框获得和失去焦点时状态显示的方法
Jan 30 Javascript
JS简单实现动画弹出层效果
May 05 Javascript
BootStrap点击下拉菜单项后显示一个新的输入框实现代码
May 16 Javascript
JS Array创建及concat()split()slice()的使用方法
Jun 03 Javascript
js中创建对象的几种方式
Feb 05 Javascript
利用node.js+mongodb如何搭建一个简单登录注册的功能详解
Jul 30 Javascript
基于vue监听滚动事件实现锚点链接平滑滚动的方法
Jan 17 Javascript
vue前端工程的搭建
Mar 31 Vue.js
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和MySql来与ODBC数据连接
2006/10/09 PHP
分享PHP计算两个日期相差天数的代码
2015/12/23 PHP
JAVASCRIPT 对象的创建与使用
2021/03/09 Javascript
使弱类型的语言JavaScript变强势
2009/06/22 Javascript
JS无法捕获滚动条上的mouse up事件的原因猜想
2012/03/21 Javascript
js时间比较示例分享(日期比较)
2014/03/05 Javascript
js QQ客服悬浮效果实现代码
2014/12/12 Javascript
ECMAScript6中Set/WeakSet详解
2015/06/12 Javascript
理解jquery事件冒泡
2016/01/03 Javascript
ClearTimeout消除闪动实例代码
2016/02/29 Javascript
详解JavaScript中js对象与JSON格式字符串的相互转换
2017/02/14 Javascript
Vue2递归组件实现树形菜单
2017/04/10 Javascript
Vue用v-for给src属性赋值的方法
2018/03/03 Javascript
vue拦截器实现统一token,并兼容IE9验证功能
2018/04/26 Javascript
基于layui框架响应式布局的一些使用详解
2019/09/16 Javascript
Vue移动端实现图片上传及超过1M压缩上传
2019/12/23 Javascript
[43:33]EG vs Spirit Supermajor 败者组 BO3 第一场 6.4
2018/06/05 DOTA
python 实时得到cpu和内存的使用情况方法
2018/06/11 Python
Python PyQt5整理介绍
2020/04/01 Python
用sleep间隔进行python反爬虫的实例讲解
2020/11/30 Python
python中的时区问题
2021/01/14 Python
CSS3中新增的对文本和字体的设置
2020/02/03 HTML / CSS
html5使用canvas实现跟随光标跳动的火焰效果
2014/01/07 HTML / CSS
全球领先的鞋类零售商:The Walking Company
2016/07/21 全球购物
一个精品风格的世界:Atterley
2019/05/01 全球购物
10条PHP编程习惯
2014/05/26 面试题
中专毕业生自我鉴定范文
2013/11/09 职场文书
毕业生实习鉴定
2013/12/11 职场文书
继承权公证书
2014/04/09 职场文书
差生评语大全
2014/05/04 职场文书
淘宝客服工作职责
2014/07/11 职场文书
单位接收函格式
2015/01/30 职场文书
营业员岗位职责
2015/02/11 职场文书
《落花生》教学反思
2016/02/16 职场文书
详解Vue的sync修饰符
2021/05/15 Vue.js
python 如何做一个识别率百分百的OCR
2021/05/29 Python