Vue-cli3多页面配置详解

网络编程 2024/12/24 佚名

3 1 2

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]] "htmlcode">

<!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>。
爬坑内容

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

总结


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

Vue-cli3,多页面,Vue-cli3,多页面配置

华山资源网 Design By www.eoogi.com

广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！

华山资源网 Design By www.eoogi.com

评论“Vue-cli3多页面配置详解”

暂无评论...

www.eoogi.com 华山资源网

120,135影音资源

344,641技术资源

22,817软件资源

435,032站长资源

稳了！魔兽国服回归的3条重磅消息！官宣时间再确认！

昨天有一位朋友在大神群里分享，自己亚服账号被封号之后居然弹出了国服的封号信息对话框。

这里面让他访问的是一个国服的战网网址，com.cn和后面的zh都非常明白地表明这就是国服战网。
而他在复制这个网址并且进行登录之后，确实是网易的网址，也就是我们熟悉的停服之后国服发布的暴雪游戏产品运营到期开放退款的说明。这是一件比较奇怪的事情，因为以前都没有出现这样的情况，现在突然提示跳转到国服战网的网址，是不是说明了简体中文客户端已经开始进行更新了呢？

更新日志

2024年12月24日

Vue-cli3多页面配置详解

如何优雅地取消 JavaScript 异步任务

redux处理异步action解决方案

评论“Vue-cli3多页面配置详解”

稳了！魔兽国服回归的3条重磅消息！官宣时间再确认！

更新日志

友情链接