Vue-cli3多页面配置详解
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>。
爬坑内容
- 若想在多页面中使用Vue-Router也是可以的，只需要在对应的页面中添加Router的实例就可以了，需要注意的是一定要当前页面Router的实例只包含当前页面的路由。
- 在使用store的时候需要注意的是由于当前store只与当前页面的实例中，当发生页面跳转之后，则store数据无法进行共享，但是在当前页面中使用Router跳转的路由，仍然是可以共享store的数据的。
总结
其实无论多页面还是单页面其实都是一种开发形式，我们只需要针对不同的需求和项目的复杂程度采取对应的措施，即技术选型，无论是使用哪种都有其利弊，没有必要一味的使用某一种模式，然而这样可能限制了我们的开发思维。
到此这篇关于Vue-cli3多页面配置详解的文章就介绍到这了,更多相关Vue-cli3 多页面内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！
相关推荐
-
vue-cli3.0实现一个多页面应用的历奇经历记录总结
本文实例讲述了vue-cli3.0实现一个多页面应用的历奇经历.分享给大家供大家参考,具体如下: 故事背景 这是在刚请完假回来,一切都在计划之中,早上一来,就接到项目经历的新的需求(这个是烂摊子,已经好几个人接手,离职),我内心是拒绝的,可最后办法,没有其他人去做,最后就落在了我头上. 接到需求,先看了需求,跟以前的比起来,改动挺大,数据结构全改了,如果在原来的基础上改,成本有点大,所以,就想着重启项目来实现.于是就使用vue的最新脚手架工具vue-cli3.0来初始化项目,但突然,一个会议又来
-
基于vue-cli3多页面开发apicloud应用的教程详解第1/2页
之前开发项APP项目直接用APICloud+原生js的方式进行编写,整个项目下来发现开发慢,页面代码多且复杂,维护起来相对困难,而且文件大打包之后的APP会比较大,apicloud的框架也不好用,支持部分es67(像let.const.import等es6新特性不支持写的太难受了) 采用vue-cli+APIcloud的方式写解决以上痛点,开发灵活,并且打包之后体积更小速度更快 环境依赖 vue webpack vue-cli3 nodeJS 基本流程 项目开发最好准备两个项目,一个打包APP,
-
Vue-cli3多页面配置详解
Vue-cli3发布已经好长时间了,笔者也在一直使用,由于公司业务需要要使用多页面配置,于是花时间研究了一下Vue-cli3如何配置多页面.由于Vue-cli3相比之前的版本做了很大的改动,在研究过程中也遇到一些问题. 对于Vue-cli3创建项目这里就不做太多的赘述了,毕竟不属于本文内容,有关相关博客也有很多,大家可以自行Google一下就好了. 多页面应用(mpa)与单页面应用(spa)优缺点 在项目中我们用到的大多数都是单页面应用(spa),对于多页面可能用到的比较少一些,具体还是要根据具
-
微信小程序全局配置以及页面配置详解
目录 全局配置 全局配置文件及常用配置项 全局配置—window 小程序窗口组成部分 了解window节点常用的配置项 设置导航栏的标题 设置导航栏的背景色 设置导航栏的标题颜色 全局开启下拉刷新功能 设置下拉刷新时窗口的背景色 设置下拉刷新时loading的样式 设置上拉触底的距离 全局配置—tabbar 什么是tabbar tabbar的6个组成部分 tabbar节点的配置项 每个tab项的配置选项 页面配置 页面配置文件的作用 页面配置和全局配置的关系 页面配置中常用的配置项 小结 全局配
-
Vue的Props实例配置详解
目录 1.Prop 的大小写 2.Prop 类型 3.Prop验证 4.传递静态|动态 Prop 5.修改Prop数据 适用于:父子组件通信. 如果父组件给子组件传递(函数)数据:本质是子组件给父组件传递数据: 如果父组件给子组件传递的(非函数)数据:本质就是父组件给子组件传递数据. 路由组件也可以传递 props数据. 1.Prop 的大小写 HTML 中的 属性名大小写不敏感,浏览器会把所有大写字符解释为小写字符.这意味着当你使用 DOM 中的模板时,camelCase (驼峰命名法) 的
-
mpvue 单文件页面配置详解
前言 mpvue 的出现把 vue 的开发体验带到了小程序这个平台中,但其目录结构与传统的 vue 项目却并不完全一致,一个典型的页面包含以下三个文件: index.vue // 页面文件 main.js // 打包入口,完成 vue 的实例化 main.json // 小程序特有的页面配置,早期写在 main.js 文件中 其中,每个页面的 main.js 文件基本都是一致的,可通过mpvue-entry来自动生成(weex 也有类似的处理),而 main.json 我个人认为直接在 vue
-
vue.config.js常用配置详解
使用vue-cli3.0搭建项目比之前更简洁,没有了build和config文件夹. vue-cli3的一些服务配置都迁移到CLI Service里面了,对于一些基础配置和一些扩展配置需要在根目录新建一个vue.config.js文件进行配置 module.exports = { // 选项... } 基本路径 baseUrl从 Vue CLI 3.3 起已弃用使用publicPath来替代. 在开发环境下,如果想把开发服务器架设在根路径,可以使用一个条件式的值 module.exports =
-
vue px转rem配置详解
目录 方法一 一.配置与安装步骤: 方法二 方法三 总结 方法一 一.配置与安装步骤: 1.在 Vue 项目的 src 文件夹下创建一个 config 文件夹: 2.在 config 文件夹中创建 rem.js: 3.将以下代码复制到 rem.js 中: // 基准大小 const baseSize = 32 // 设置 rem 函数 function setRem () { // 当前页面宽度相对于 750 宽的缩放比例,可根据自己需要修改. const scale = document.do
-
Django+Vue跨域环境配置详解
概述 在使用Django+Vue开发过程中,遇到了很多开发环境相关的问题,比如跨域,比如ajax请求参数等,本篇文章主要记录解决在开发过程中,遇到的一些问题. 跨域不带Cookie 在使用Vue脚手架开发的过程中,会使用Vue脚手架自带的Server进行项目调试,Vue自带的Server支持 hot reloading ,这个特性是非常好用的.但是在开发过程中,因为要与后端交互,所以在请求后端接口的时候,会遇到跨域问题,这个问题在一些职责划分清楚的团队并不存在,因为前端开发人员会才用Mock数据
-
vue单页面改造多页面应用详解第1/2页
单页面和多页面的区别这里就不细说了.我司业务适合多页面,许多小应用都是通过iframe整体嵌入的形式. 如果项目过于庞大,就会有很不好的体验问题. 拆分多个项目的话,又会有额外的开支,如服务器资源部署等问题. 基于此改造的目标 单独业务逻辑单独一个页面 可实现单命令打包 可单独打包 首先我们准备一个基础的项目,目录结构如下 src目录为我们平时开发的目录,dist为打包后的目录,整体结构如图 1 将当前项目改造成多页面目录 pages下为我们开发的目录文件,改造过程就是将原src下所有目录结构复
-
vue 项目常用加载器及配置详解
本文介绍了vue 项目常用加载器及配置详解,分享给大家,具体如下: 1.安装sass: 1.1 由于sass-loader依赖于node-sass,所以在安装sass-loader的同时还需安装node-sass npm install --save-dev node-sass npm install --save-dev sass-loader 1.2 安装完成后修改 <style>标签: <style lang="scss"></style> 2
-
Visual Studio 2019配置vue项目的图文教程详解
一,环境安装 1:Vue项目一切基于Node.js,必须先安装NodeJS, 下载地址:https://nodejs.org/zh-cn/ 安装nodejs,一路next就行了 Additonal工具可以不用安装. win+r 输入cmd 输入 node -v 和 npm -v 得到版本信息证明装好了. 2:确认Visual Studio 2019环境:看扩展工具里有没有勾选NodeJs 二,使用VS2019 创建Vue项目 后期会新增多个vue的项目,所以建议加一个vue名称 方案管理文件 你