华山资源网

Vue-cli3多页面配置详解
网络编程 2024/11/15 佚名
3 1

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>。


爬坑内容


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



总结




其实无论多页面还是单页面其实都是一种开发形式，我们只需要针对不同的需求和项目的复杂程度采取对应的措施，即技术选型，无论是使用哪种都有其利弊，没有必要一味的使用某一种模式，然而这样可能限制了我们的开发思维。
华山资源网 Design By www.eoogi.com
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
华山资源网 Design By www.eoogi.com
www.eoogi.com 华山资源网
120,135影音资源
344,641技术资源
22,817软件资源
435,032站长资源

更新日志

友情链接

杰晶网络 DDR爱好者之家 桃源资源网 杰网资源 富贵资源网 南强小屋 铁雪资源网 幽灵资源网 万梅资源网 狼山资源网 白云岛资源网 昆仑资源网 相思资源网 明霞山资源网 内蒙古资源网 黑松山资源网 茶园资源网 饿虎岗资源网 大旗谷资源网 常春岛资源网 岱庙资源网 兴国资源网 快活林资源网 蝙蝠岛资源网 帝王谷资源网 白云城资源网 伏龙阁资源网 清风细雨楼 天枫庄资源网 圆月山庄资源网 无争山庄资源网 神水资源网 移花宫资源网 神剑山庄资源网 无为清净楼资源网 金钱帮资源网 丐帮资源网 华山资源网 极乐门资源网 小李飞刀资源网 凤求凰客栈 风云阁资源网 金狮镖局 鸳鸯亭资源网 千金楼资源网 更多链接
华山资源网 Design By www.eoogi.com