vue-cli+webpack搭建一个多页面应用
什么是单页面应用和多页面应用?
SPA单页面应用:指的是只有一个主页面的应用(只有一个html页面),项目启动时加载主页面时会一次性加载所有的js、css等相关资源(需要进行首屏优化)。所有内容都包含在主页面中,对每一个功能模块组件化。单页面的跳转实质上就是切换相关组件,仅仅刷新局部资源。
MPA多页面应用:指的是有多个独立的页面(多个HTML页面),打开不同的页面时会加载相关的js以及css资源,公共资源会重复加载。多页面应用跳转,需要整个页面进行刷新。
单页面和多页面的区别
1、刷新方式
- SPA:相关组件的切换,页面局部刷新;
- MPA:整个页面进行刷新。
2、路由模式
- SPA:可以使用hash,也可以使用history;
- MPA:普通链接跳转。
3、用户体验
- SPA:页面片段间切换快,用户体验效果好,但初次加载文件过多,需要做相关优化;
- MPA:页面切换缓慢,流畅度不够,用户体验效果较差;
4、数据传递
- SPA:容易实现数据传递(路由带参数传值、Vuex传值等);
- MPA:依赖url传值、cookie、本地session。
5、使用范围
- SPA:高要求的体验度,追求界面流畅的应用;
- MPA:适用于追求高度支持搜索引擎的应用。
如何使用vue-cli+webpack初始化一个项目?
1、使用vue init webpack "项目名"
2、完成后,使用cd "项目文件名"
及 npm isntall
安装依赖,最后使用npm run dev
启动项目。
vue-cli+webpack搭建多页面应用
有了上面的概念以及项目基础搭建,我们可以在vue-cli脚手架搭建的SPA项目上做一些修改,使其变成MPA应用。
项目结构调整
首先,可以创建一下下面红色方框的目录结构,需要注意的是我们需要把mian.js文件改名为index.js,保证页面入口js文件和模板文件名保持一致,上面红色方框的文件是webpack初始化的文件。
webpack配置更改
1、在build/utils.js中我们添加两个方法,分别为多入口文件和多页面输出。
const path = require('path')
const glob = require('glob')
const PAGE_PATH = path.resolve(__dirname, '../src/pages');
const HtmlWebpackPlugin = require('html-webpack-plugin'); //对每个页面单独打包生成一个新页面的插件
const merge = require('webpack-merge')
// 多入口配置
exports.entries = function() {
var entryFiles = glob.sync(PAGE_PATH + '/*/*.js')
var map = {
}
entryFiles.forEach((filePath) => {
// /index.js
var filename = filePath.