vue单页面改造多页面应用详解第1/2页 vue单页面改造多页面应用详解

单页面和多页面的区别这里就不细说了。我司业务适合多页面，许多小应用都是通过iframe整体嵌入的形式。

如果项目过于庞大，就会有很不好的体验问题。
拆分多个项目的话，又会有额外的开支，如服务器资源部署等问题。

基于此改造的目标

单独业务逻辑单独一个页面
可实现单命令打包
可单独打包

首先我们准备一个基础的项目，目录结构如下

文章图片

src目录为我们平时开发的目录，dist为打包后的目录，整体结构如图
1 将当前项目改造成多页面目录

文章图片

pages下为我们开发的目录文件，改造过程就是将原src下所有目录结构复制到home，index每个页面单独一份为了提现多页面优势，这里我们选用两款ui框架，以便最后做下打包体积对比

npm i element-ui -Snpm i ant-design-vue -S

在home和index中分别引入

文章图片

home页面类似，然后我们更改vue.config.js

module.exports = {publicPath: './',productionSourceMap: false,pages: { // vue cli3 自带多页面配置index: {entry: `src/pages/index/main.js`,template: `public/index.html`,filename: `index.html`},home: {entry: `src/pages/home/main.js`,template: `public/index.html`,filename: `home.html`}},devServer: {port: 8080},lintOnSave: false}

现在我们打包，看一下生成的目录结构

FileSizeGzippeddist\js\chunk-vendors.239e820f.js2544.36 KiB703.20 KiBdist\js\index.1716ccad.js11.33 KiB4.13 KiBdist\js\home.e4410a07.js7.08 KiB2.57 KiBdist\js\about.ca80b2fc.js0.76 KiB0.29 KiBdist\css\chunk-vendors.68b49edf.css666.01 KiB89.04 KiBdist\css\index.5dfa7415.css0.45 KiB0.28 KiBdist\css\home.d995708f.css0.44 KiB0.27 KiBImages and other types of assets omitted.Build at: 2022-05-01T12:26:06.551Z - Hash: 693bf5bdcf72896b - Time: 16240ms DONEBuild complete. The dist directory is ready to be deployed. INFOCheck out deployment instructions at https://cli.vuejs.org/guide/deployment.html

可以看到打包出来的是混在一起的。我们下一步就是将他们拆分开，并且可配置命令单独打包思路是循环pages下文件夹我们找出pages下目录中带有main.js的所有文件夹名。当然我们也可以手动写死，每次增加页面的时候，我们单独维护这个数组

const pages = ['home', 'index'] // 在增加页面的时候，手动维护这个数组

当然我们也有方法可以帮我们维护这个数组，可以在我们更新的时候省事一些

// 获取pages下文件夹const path = require('path')const glob = require('glob')// 找到pages所在文件夹 hello-world\src\pagesconst PATH_ENTRY = path.resolve(__dirname, '../src/pages')// 匹配到pages路径下 main.js 的文件// [//'D:/测试项目/hello-world/src/pages/home/main.js',//'D:/测试项目/hello-world/src/pages/index/main.js'// ]const entryFilePaths = glob.sync(PATH_ENTRY + '/**/main.js')const buildEntries = []entryFilePaths.forEach((filePath) => {// 找到对应的文件名，indexhomeconst FILENAME = filePath.match(/([^/]+)\/main\.js$/)[1]buildEntries.push(FILENAME)})module.exports = {buildEntries}

buildEntries 既为我们拿到的数组
现在我们继续改造vue.config.js, 我们先通过更改package.json中的命令传参的形式，根据我们传递的参数，单独打包对应的page

"scripts": {"serve": "vue-cli-service serve","build": "vue-cli-service build","build:index": "vue-cli-service build index --no-clean", // 注意no-clean 不能清除文件，不然可能将文件夹下打包的其他page清理掉，如果是每次部署一个page，这就无所谓了"build:home": "vue-cli-service build home --no-clean","build:prod": "vue-cli-service build","_build": "node build/build.js","lint": "vue-cli-service lint" }

我们如何能拿到传入的index 或者home参数呢结果是process.argv这个参数中可以取到，具体可以自行搜索下 process.argv为一个数组，第一项为可执行文件的目录第二项为当前执行的JavaScript文件路径剩余的是传递的参数，就如我们传递的index 是在process.argv[3]中现将vue.config.js改造如下

// 编译配置的多页面const modules = {}const isProduction = process.env.NODE_ENV === 'production'const { buildEntries } = require('./config/getPages')// 初始化页面参数function initPageParams(page) {modules12下一页阅读全文

vue
单页面
多页面

文章图片
Vue使用vue-area-linkage实现地址三级联动效果的示例
很多时候我们需要使用地址三级联动，即省市区三级联动，这篇文章主要介绍了Vue使用vue-area-linkage实现地址三级联动效果的示例，感兴趣的小伙伴们可以参考一下 2018-06-06
文章图片
vue中引用swiper轮播插件的教程详解
这篇文章主要介绍了vue中引用swiper轮播插件的方法,在需要使用swiper的组件里引入swiper，swiper的初始化放在mounted里。具体实例代码大家跟随脚本之家小编一起看看吧 2018-08-08
文章图片
深入浅析Vue组件开发
本文是主要介绍基于Vue的一个组件开发。本文给大家介绍的非常详细，具有参考借鉴价值，需要的朋友参考下吧 2016-11-11
文章图片
vue.js实现用户评论、登录、注册、及修改信息功能
这篇文章主要为大家详细介绍了vue.js实现用户评论、登录、注册、及修改信息功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下 2017-05-05
文章图片
vue 监听键盘回车事件详解 @keyup.enter || @keyup.enter.native
今天小编就为大家分享一篇vue 监听键盘回车事件详解 @keyup.enter || @keyup.enter.native，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧 2018-08-08
文章图片
vue中英文切换实例代码
在本篇文章里小编给大家整理了关于vue中英文切换实例代码，需要的朋友们学习参考下。 2020-01-01
文章图片
Vue slot用法(小结)
这篇文章主要介绍了Vue slot用法(小结)，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧 2018-10-10
文章图片
Vue利用History记录上一页面的数据方法实例
这篇文章主要给大家介绍了关于Vue利用History记录上一页面的数据的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧 2018-11-11
文章图片
vue的style绑定background-image的方式和其他变量数据的区别详解
今天小编就为大家分享一篇vue的style绑定background-image的方式和其他变量数据的区别详解，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧 2018-09-09
文章图片
【vue单页面改造多页面应用详解第1/2页】vue.js学习之递归组件
最近学习vue.js有一段时间了，使用vue做了一套后台管理系统，其中使用最多就是递归组件，也因为自己对官方文档的不熟悉使得自己踩了不少坑，所以今天写出来和大家一起分享。有需要的朋友们可以参考借鉴，下面来一起看看吧。 2016-12-12