VIP用户交流群:462197261 收藏本站北冥有鱼 互联网前沿资源第一站 助力全行业互联网+
在线客服:78895949
tonglan
  • 当前位置:
  • Vue CLI3基础学习之pages构建多页应用

    前言

    首先我们可以把多页应用理解为由多个单页构成的应用,而何谓多个单页呢?其实你可以把一个单页看成是一个 html 文件,那么多个单页便是多个 html 文件,多页应用便是由多个 html 组成的应用,如下图所示

    既然多页应用拥有多个 html ,那么同样其应该拥有多个独立的入口文件、组件、路由、 vuex 等。没错,说简单一点就是多页应用的每个单页都可以拥有单页应用 src 目录下的文件及功能,我们来看一下一个基础多页应用的目录结构

    ├── node_modules               # 项目依赖包目录
    ├── build                      # 项目 webpack 功能目录
    ├── config                     # 项目配置项文件夹
    ├── src                        # 前端资源目录
    │   ├── images                 # 图片目录
    │   ├── components             # 公共组件目录
    │   ├── pages                  # 页面目录
    │   │   ├── page1              # page1 目录
    │   │   │   ├── components     # page1 组件目录
    │   │   │   ├── router         # page1 路由目录
    │   │   │   ├── views          # page1 页面目录
    │   │   │   ├── page1.html     # page1 html 模板
    │   │   │   ├── page1.vue      # page1 vue 配置文件
    │   │   │   └── page1.js       # page1 入口文件
    │   │   ├── page2              # page2 目录
    │   │   └── index              # index 目录
    │   ├── common                 # 公共方法目录
    │   └── store                  # 状态管理 store 目录
    ├── .gitignore                 # git 忽略文件
    ├── .env                       # 全局环境配置文件
    ├── .env.dev                   # 开发环境配置文件
    ├── .postcssrc.js              # postcss 配置文件
    ├── babel.config.js            # babel 配置文件
    ├── package.json               # 包管理文件
    ├── vue.config.js              # CLI 配置文件
    └── yarn.lock                  # yarn 依赖信息文件

    二、多入口

    在单页应用中,我们的入口文件只有一个, CLI 默认配置的是 main.js ,但是到了多页应用,我们的入口文件便包含了 page1.js 、 page2.js 、 index.js 等,数量取决于 pages 文件夹下目录的个数,这时候为了项目的可拓展性,我们需要自动计算入口文件的数量并解析路径配置到 webpack 中的 entry 属性上,如:

    module.exports = {
     ...
     
     entry: {
      page1: '/xxx/pages/page1/page1.js',
      page2: '/xxx/pages/page2/page2.js',
      index: '/xxx/pages/index/index.js',
     },
     
     ...
    }

    那么我们如何读取并解析这样的路径呢,这里就需要使用工具和函数来解决了。我们可以在根目录新建 build 文件夹存放 utils.js 这样共用的 webpack 功能性文件,并加入多入口读取解析方法

    /* utils.js */
    const path = require('path');
    
    // glob 是 webpack 安装时依赖的一个第三方模块,该模块允许你使用 * 等符号,
    // 例如 lib/*.js 就是获取 lib 文件夹下的所有 js 后缀名的文件
    const glob = require('glob');
    
    // 取得相应的页面路径,因为之前的配置,所以是 src 文件夹下的 pages 文件夹
    const PAGE_PATH = path.resolve(__dirname, '../src/pages');
    
    /* 
    * 多入口配置
    * 通过 glob 模块读取 pages 文件夹下的所有对应文件夹下的 js * 后缀文件,如果该文件存在
    * 那么就作为入口处理
    */
    exports.getEntries = () => {
     let entryFiles = glob.sync(PAGE_PATH + '/*/*.js') // 同步读取所有入口文件
     let map = {}
     
     // 遍历所有入口文件
     entryFiles.forEach(filePath => {
      // 获取文件名
      let filename = filePath.substring(filePath.lastIndexOf('\/') + 1, filePath.lastIndexOf('.'))
      
      // 以键值对的形式存储
      map[filename] = filePath 
     })
     
     return map
    }

    读取并存储完毕后,我们得到了一个入口文件的对象集合,这个对象我们便可以将其设置到 webpack 的 entry 属性上,这里我们需要修改 vue.config.js 的配置来间接修改 webpack 的值

    /* vue.config.js */
    
    const utils = require('./build/utils')
    
    module.exports = {
     ...
     
     configureWebpack: config => {
      config.entry = utils.getEntries()
     },
     
     ...
    }

    这样我们多入口的设置便完成了,当然这并不是 CLI 所希望的操作,后面我们会进行改进。

    三、多模板

    相对于多入口来说,多模板的配置也是大同小异,这里所说的模板便是每个 page 下的 html 模板文件,而模板文件的作用主要用于 webpack 中 html-webpack-plugin 插件的配置,其会根据模板文件生产一个编译后的 html 文件并自动加入携带 hash 的脚本和样式,基本配置如下

    /* webpack 配置文件 */
    const HtmlWebpackPlugin = require('html-webpack-plugin') // 安装并引用插件
    
    module.exports = {
     ...
     
     plugins: [
      new HtmlWebpackPlugin({
       title: 'My Page', // 生成 html 中的 title
       filename: 'demo.html', // 生成 html 的文件名
       template: 'xxx/xxx/demo.html', // 模板路径
       chunks: ['manifest', 'vendor', 'demo'], // 所要包含的模块
       inject: true, // 是否注入资源
      })
     ]
     
     ...
    }

    以上是单模板的配置,那么如果是多模板只要继续往 plugins 数组中添加 HtmlWebpackPlugin 即可,但是为了和多入口一样能够灵活的获取 pages 目录下所有模板文件并进行配置,我们可以在 utils.js 中添加多模板的读取解析方法

    /* utils.js */
    
    // 多页面输出配置
    // 与上面的多页面入口配置相同,读取 page 文件夹下的对应的 html 后缀文件,然后放入数组中
    exports.htmlPlugin = configs => {
     let entryHtml = glob.sync(PAGE_PATH + '/*/*.html')
     let arr = []
     
     entryHtml.forEach(filePath => {
      let filename = filePath.substring(filePath.lastIndexOf('\/') + 1, filePath.lastIndexOf('.'))
      let conf = {
       template: filePath, // 模板路径
       filename: filename + '.html', // 生成 html 的文件名
       chunks: ['manifest', 'vendor', filename],
       inject: true,
      }
      
      // 如果有自定义配置可以进行 merge
      if (configs) {
       conf = merge(conf, configs)
      }
      
      // 针对生产环境配置
      if (process.env.NODE_ENV === 'production') {
       conf = merge(conf, {
        minify: {
         removeComments: true, // 删除 html 中的注释代码
         collapseWhitespace: true, // 删除 html 中的空白符
         // removeAttributeQuotes: true // 删除 html 元素中属性的引号
        },
        chunksSortMode: 'manual' // 按 manual 的顺序引入
       })
      }
      
      arr.push(new HtmlWebpackPlugin(conf))
     })
     
     return arr
    }

    • 以上我们仍然是使用 glob 读取所有模板文件,然后将其遍历并设置每个模板的 config ,同时针对一些自定义配置和生产环境的配置进行了 merge 处理,其中自定义配置的功能我会在下节进行介绍,这里介绍一下生产环境下 minify 配置的作用:将 html-minifier 的选项作为对象来缩小输出。
    • html-minifier 是一款用于缩小 html 文件大小的工具,其有很多配置项功能,包括上述所列举的常用的删除注释、空白、引号等。
    • 当我们编写完了多模板的方法后,我们同样可以在 vue.config.js 中进行配置,与多入口不同的是我们在 configureWebpack 中不能直接替换 plugins 的值,因为它还包含了其他插件
    /* vue.config.js */
    
    const utils = require('./build/utils')
    
    module.exports = {
     ...
     
     configureWebpack: config => {
      config.entry = utils.getEntries() // 直接覆盖 entry 配置
      
      // 使用 return 一个对象会通过 webpack-merge 进行合并,plugins 不会置空
      return {
       plugins: [...utils.htmlPlugin()]
      }
     },
     
     ...
    }

    如此我们多页应用的多入口和多模板的配置就完成了,这时候我们运行命令 yarn build 后你会发现 dist 目录下生成了 3 个 html 文件,分别是 index.html 、 page1.html 和 page2.html

    四、使用 pages 配置

    其实,在 vue.config.js 中,我们还有一个配置没有使用,便是 pages 。 pages 对象允许我们为应用配置多个入口及模板,这就为我们的多页应用提供了开放的配置入口。官方示例代码如下

    /* vue.config.js */
    module.exports = {
     pages: {
      index: {
       // page 的入口
       entry: 'src/index/main.js',
       // 模板来源
       template: 'public/index.html',
       // 在 dist/index.html 的输出
       filename: 'index.html',
       // 当使用 title 选项时,
       // template 中的 title 标签需要是 <title><%= htmlWebpackPlugin.options.title %></title>
       title: 'Index Page',
       // 在这个页面中包含的块,默认情况下会包含
       // 提取出来的通用 chunk 和 vendor chunk。
       chunks: ['chunk-vendors', 'chunk-common', 'index']
      },
      // 当使用只有入口的字符串格式时,
      // 模板会被推导为 `public/subpage.html`
      // 并且如果找不到的话,就回退到 `public/index.html`。
      // 输出文件名会被推导为 `subpage.html`。
      subpage: 'src/subpage/main.js'
     }
    }

    我们不难发现, pages 对象中的 key 就是入口的别名,而其 value 对象其实是入口 entry 和模板属性的合并,这样我们上述介绍的获取多入口和多模板的方法就可以合并成一个函数来进行多页的处理,合并后的 setPages 方法如下

    // pages 多入口配置
    exports.setPages = configs => {
     let entryFiles = glob.sync(PAGE_PATH + '/*/*.js')
     let map = {}
    
     entryFiles.forEach(filePath => {
      let filename = filePath.substring(filePath.lastIndexOf('\/') + 1, filePath.lastIndexOf('.'))
      let tmp = filePath.substring(0, filePath.lastIndexOf('\/'))
    
      let conf = {
       // page 的入口
       entry: filePath, 
       // 模板来源
       template: tmp + '.html', 
       // 在 dist/index.html 的输出
       filename: filename + '.html', 
       // 页面模板需要加对应的js脚本,如果不加这行则每个页面都会引入所有的js脚本
       chunks: ['manifest', 'vendor', filename], 
       inject: true,
      };
    
      if (configs) {
       conf = merge(conf, configs)
      }
    
      if (process.env.NODE_ENV === 'production') {
       conf = merge(conf, {
        minify: {
         removeComments: true, // 删除 html 中的注释代码
         collapseWhitespace: true, // 删除 html 中的空白符
         // removeAttributeQuotes: true // 删除 html 元素中属性的引号
        },
        chunksSortMode: 'manual'// 按 manual 的顺序引入
       })
      }
    
      map[filename] = conf
     })
    
     return map
    }

    上述代码我们 return 出的 map 对象就是 pages 所需要的配置项结构,我们只需在 vue.config.js 中引用即可

    /* vue.config.js */
    
    const utils = require('./build/utils')
    
    module.exports = {
     ...
     
     pages: utils.setPages(),
     
     ...
    }

    这样我们多页应用基于 pages 配置的改进就大功告成了,当你运行打包命令来查看输出结果的时候,你会发现和之前的方式相比并没有什么变化,这就说明这两种方式都适用于多页的构建,但是这里还是推荐大家使用更便捷的 pages 配置

    总结

    以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,谢谢大家对北冥有鱼的支持。

    您可能感兴趣的文章:

    • vue cli 3.x 项目部署到 github pages的方法
    • Vue-cli创建项目从单页面到多页面的方法
    • 详解vue-cli + webpack 多页面实例配置优化方法
    • vue-cli实现多页面多路由的示例代码
    • 详解如何将 Vue-cli 改造成支持多页面的 history 模式
    • 详解vue-cli + webpack 多页面实例应用
    • vue-cli创建的项目,配置多页面的实现方法
    • 基于vue cli重构多页面脚手架过程详解
    • 详解vue-cli多页面工程实践

    广而告之:
    热门推荐:
    vue-router 前端路由之路由传值的方式详解

    路由传值 在前端的路由里面,我们在切换路由的时候,也相当于切换了页面,页面与页面之前有时候需要做到传值 ,这个时候就需要进行路由传值,在VueRouter里面,两个路由之间做跳转的时候,如何进行传值呢? 普通跨页面传值: 1.通过localStorage setItem() getItem() 2.通过···

    Dreamweaver CC2019怎么安装并激活? dw2019安装激活教程

    Dreamweaver2019最新版想要下载安装使用,该怎么安装dw cc2019并激活呢?下面我们就来看看详细的教程。 软件名称: Dreamweaver CC 2019 19.0 中文特别版(附破解步骤+破解补丁) 64位 软件大小: 956MB 更新时间: 2018-10-16 本教程总结涵盖内容汇总: 一、安装教程; 二、···

    vue中$refs的用法及作用详解

    一般来讲,获取DOM元素,需document.querySelector(".input1")获取这个dom节点,然后在获取input1的值。 但是用ref绑定之后,我们就不需要在获取dom节点了,直接在上面的input上绑定input1,然后$refs里面调用就行。 然后在javascript里面这样调用:this.$refs.input1 这样就···

    设置IE8使用IE7的样式的代码

    <meta http-equiv="x-ua-compatible" content="ie=7" />

    ThinkPHP实现事务回滚示例代码

    ThinkPHP的事务回滚示例如下: $m=D('YourModel');//或者是M(); $m2=D('YouModel2'); $m->startTrans();//在第一个模型里启用就可以了,或者第二个也行 $result=$m->where('删除条件')->delete(); $result2=m2->where('删除条件')->delete(); if($result &···

    Dreamweaver中的表格怎么排版?

    我们在Dreamweaver里面用到最多就是表格了,那我们怎么给他进行排版呢,大家看我操作就行了。 1、打开电脑的Dreamweaver主程序,然后新建一个空白的html 2、新建之后,我们点击上边的插入的按钮,我们在右侧的插入选项也可以插入 3、选择下边的表格,我们可以看见后面有他的···

    JavaScript实现写入文件到本地的方法【基于FileSaver.js插件】

    本文实例讲述了JavaScript实现写入文件到本地的方法。分享给大家供大家参考,具体如下: 工作中有时需要通过 JavaScript 保存文件到本地,我们都知道 JavaScript 基于安全的考虑,是不允许直接操作本地文件的。 IE 可以通过 VB 插件的方式进行,而 Chrome 和 firefox 都不支持 ···

    使用 Vue 绑定单个或多个 Class 名的实例代码

    一、用 变量形式 绑定单个 Class 名 在 vue 中绑定单个 class 名还好说,直接写就可以了 <template> <div id="app"> <!-- 因为是自定义属性,所以要用到 v-bind ,简写为 : --> <!-- 3.将 box 绑定给 div --> <div :class="box"></div&g···

    浅谈Node.js 中间件模式

    中间件在 Node.js 中被广泛使用,它泛指一种特定的设计模式、一系列的处理单元、过滤器和处理程序,以函数的形式存在,连接在一起,形成一个异步队列,来完成对任何数据的预处理和后处理。 它的优点在于 灵活性 :使用中间件我们用极少的操作就能得到一个插件,用最简单的方法···

    PHP中的正规表达式(一)

    PHP中的正规表达式(一)Hunte 2000年4月14日 PHP继承*NIX的一贯传统,完全支持正规表达式的处理。正规表达式提供了一种高级的,但不直观的字符串匹配和处理的方法。用过PERL的正规表达式的朋友都知道,正规表达式的功能非常强大,但学起来不是那么容易。 比如: ^.+@.+···