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

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

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

基于此改造的目标

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

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

image.png

src目录为我们平时开发的目录,dist为打包后的目录,整体结构如图

1 将当前项目改造成多页面目录

image.png

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

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

在home和index中分别引入

image.png

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
} 

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

 File                                   Size              Gzipped

  dist\js\chunk-vendors.239e820f.js      2544.36 KiB       703.20 KiB
  dist\js\index.1716ccad.js              11.33 KiB         4.13 KiB
  dist\js\home.e4410a07.js               7.08 KiB          2.57 KiB
  dist\js\about.ca80b2fc.js              0.76 KiB          0.29 KiB
  dist\css\chunk-vendors.68b49edf.css    666.01 KiB        89.04 KiB
  dist\css\index.5dfa7415.css            0.45 KiB          0.28 KiB
  dist\css\home.d995708f.css             0.44 KiB          0.27 KiB

  Images and other types of assets omitted.
  Build at: 2022-05-01T12:26:06.551Z - Hash: 693bf5bdcf72896b - Time: 16240ms

 DONE  Build complete. The dist directory is ready to be deployed.
 INFO  Check 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\pages
const 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) => {
  // 找到对应的文件名,index  home
  const 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) {
  modules
                            
  
12下一页阅读全文
您可能感兴趣的文章:
  • vue单页面改造多页面应用的全过程记录
  • vue将单页面改造成多页面应用的方法
  • Vue-cli创建项目从单页面到多页面的方法

  • vue
  • 单页面
  • 多页面

相关文章

  • Vue使用vue-area-linkage实现地址三级联动效果的示例

    Vue使用vue-area-linkage实现地址三级联动效果的示例

    很多时候我们需要使用地址三级联动,即省市区三级联动,这篇文章主要介绍了Vue使用vue-area-linkage实现地址三级联动效果的示例,感兴趣的小伙伴们可以参考一下

    2018-06-06

  • vue中引用swiper轮播插件的教程详解

    vue中引用swiper轮播插件的教程详解

    这篇文章主要介绍了vue中引用swiper轮播插件的方法,在需要使用swiper的组件里引入swiper,swiper的初始化放在mounted里。具体实例代码大家跟随脚本之家小编一起看看吧

    2018-08-08

  • 深入浅析Vue组件开发

    深入浅析Vue组件开发

    本文是主要介绍基于Vue的一个组件开发。本文给大家介绍的非常详细,具有参考借鉴价值,需要的朋友参考下吧

    2016-11-11

  • vue.js实现用户评论、登录、注册、及修改信息功能

    vue.js实现用户评论、登录、注册、及修改信息功能

    这篇文章主要为大家详细介绍了vue.js实现用户评论、登录、注册、及修改信息功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

    2017-05-05

  • vue 监听键盘回车事件详解 @keyup.enter || @keyup.enter.native

    vue 监听键盘回车事件详解 @keyup.enter || @keyup.enter.native

    今天小编就为大家分享一篇vue 监听键盘回车事件详解 @keyup.enter || @keyup.enter.native,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧

    2018-08-08

  • vue中英文切换实例代码

    vue中英文切换实例代码

    在本篇文章里小编给大家整理了关于vue中英文切换实例代码,需要的朋友们学习参考下。

    2020-01-01

  • Vue slot用法(小结)

    Vue slot用法(小结)

    这篇文章主要介绍了Vue slot用法(小结),小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

    2018-10-10

  • Vue利用History记录上一页面的数据方法实例

    Vue利用History记录上一页面的数据方法实例

    这篇文章主要给大家介绍了关于Vue利用History记录上一页面的数据的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

    2018-11-11

  • vue的style绑定background-image的方式和其他变量数据的区别详解

    vue的style绑定background-image的方式和其他变量数据的区别详解

    今天小编就为大家分享一篇vue的style绑定background-image的方式和其他变量数据的区别详解,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧

    2018-09-09

  • vue.js学习之递归组件

    vue.js学习之递归组件

    最近学习vue.js有一段时间了,使用vue做了一套后台管理系统,其中使用最多就是递归组件,也因为自己对官方文档的不熟悉使得自己踩了不少坑,所以今天写出来和大家一起分享。有需要的朋友们可以参考借鉴,下面来一起看看吧。

    2016-12-12

最新评论

张贴在2