VUE学习：八.多页应用

sadwind2024-02-29笔记201

前言

MPA 多页面应用（MultiPage Application），指有多个独立页面的应用（多个 html 页面），每个页面必须重复加载 js、css 等相关资源。多页应用跳转，需要整页资源刷新。

对于项目复杂度过高或者页面模块之间差异化较大的项目，我们可以选择构建多页应用来实现,我们可以把多页应用理解为由多个单页构成的应用，那么同样其应该拥有多个独立的入口文件、组件、路由、vuex 等。

多页应用的每个单页都可以拥有单页应用 src 目录下的文件及功能

#1.vue-cli 2.x 中

#1.1 webpack 配置

多页配置示例

module.exports = {
    ...
    entry: {
        page1: '/xxx/pages/page1/page1.js', // 配置页面写死，不好
        page2: '/xxx/pages/page2/page2.js',
        index: '/xxx/pages/index/index.js',
    },
    ...}

1
2
3
4
5
6
7
8
9

多页配置(动态)
配置文件

多页应用入口动态配置

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

1
2
3
4
5
6
7
8
9

#2.vue-cli 3.x 中

#2.1.pages 配置

单页配置

/* vue.config.js */module.exports = {
  pages: {
    index: {
      entry: "src/index/main.js", // page 的入口
      template: "public/index.html", // 模板来源
      filename: "index.html", // 在 dist/index.html 的输出
      title: "Index Page", // 当使用 title 选项时，template 中的 title 标签需要是 <title><%= htmlWebpackPlugin.options.title %></title>
      chunks: ["chunk-vendors", "chunk-common", "index"], // 在这个页面中包含的块，默认情况下会包含，提取出来的通用 chunk 和 vendor chunk
    },
    subpage: "src/subpage/main.js", //子页面
  },}

1
2
3
4
5
6
7
8
9
10
11
12
13

多页配置
多入口配置文件

配置多页应用

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

1
2
3
4
5
6
7

#2.2. 路由跳转

多页应用中的每个单页都是相互隔离的，无法使用 vue-router 中的方法进行跳转，需要使用原生方法：location.href 或 location.replace

此外为了能够清晰的分辨路由属于哪个单页，我们应该给每个单页路由添加前缀，比如：

index 单页：/vue/
page1 单页：/vue/page1/
page2 单页：/vue/page2/

/vue/ 为项目的二级目录，其后的目录代表路由属于哪个单页,每个单页的路由配置如下

/* page1 单页路由配置 */import Vue from "vue"import Router from "vue-router"const Home = (resolve) => {
  require.ensure(["../views/home.vue"], () => {
    resolve(require("../views/home.vue"))
  })}Vue.use(Router)let base = `${process.env.BASE_URL}` + "page1" // 添加单页前缀export default new Router({
  mode: "history",
  base: base,
  routes: [
    {
      path: "/",
      name: "home",
      component: Home,
    },
  ],})

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

我们通过设置路由的 base 值来为每个单页添加路由前缀，如果是 index 单页我们无需拼接路由前缀，直接跳转至二级目录即可。

<template>
  <div id="app">
    <div id="nav">
      <a @click="goFn('')">Index</a> | <a @click="goFn('page1')">Page1</a> |      <a @click="goFn('page2')">Page2</a> |    </div>
    <router-view />
  </div></template><script>export default {
  methods: {
    goFn(name) {
      location.href = `${process.env.BASE_URL}` + name    },
  },}</script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

单页之间的跳转做一下封装，实现一个 Navigator 类，类的代码可以查看本文最后的示例，封装完成后我们可以将跳转方法修改为：

this.$openRouter({
  name: name, // 跳转地址
  query: {
    text: "hello", // 可以进行参数传递
  },})

1
2
3
4
5
6

使用上述 $openRouter 方法我们还需要一个前提条件，便是将其绑定到 Vue 的原型链上，我们在所有单页的入口文件中添加：

import { Navigator } from "../../common" // 引入 NavigatorVue.prototype.$openRouter = Navigator.openRouter // 添加至 Vue 原型链

1
2

需要注意的是因为其本质使用的是 location 跳转，所以必然会产生浏览器的刷新与重载。

重定向问题

跳转 Page1、Page2 仍然处于 Index 父组件下不能正常打开，这是因为浏览器认为你所要跳转的页面还是在 Index 根路由下，同时又没有匹配到 Index 单页中对应的路由，这时我们需要做一次重定向

/* vue.config.js */let baseUrl = '/vue/';module.exports = {
  ...
  devServer: {
    historyApiFallback: { // 添加 `historyApiFallback` 配置项，该配置项主要用于解决 HTML5 History API 产生的问题
      rewrites: [
        { from: new RegExp(baseUrl + 'page1'), to: baseUrl + 'page1.html' },
        { from: new RegExp(baseUrl + 'page2'), to: baseUrl + 'page2.html' },
      ]
    }
  }
  ...}