前言
在前端开发中，通常我们都采用单页面应用（SPA）进行开发，但在某些特定情况下，我们需要采用多页面应用（MPA）来实现需求，比如：SEO需求、旧项目改造等。而 vue-mpa 就是一款可以帮助我们快速构建多页面应用的 npm 包。
本文将详细介绍 vue-mpa 的使用方法，包括安装、配置、实现多页面以及常见问题等。
安装
首先，我们需要在项目中安装 vue-mpa。可以通过以下命令进行安装：
npm install vue-mpa --save-dev
配置
vue-mpa 的配置包括两个部分：webpack 的配置和 vue.config.js 的配置。
webpack 配置
以下为一个基础的 webpack 配置：
-- -------------------- ---- -------
----- ---- - ---------------
----- ----------------- - ------------------------------
----- --------------- - --------------------------------
-------------- - -
------ -
----- ---------------------------
------ ---------------------------
--
------- -
----- ----------------------- --------
--------- ------------------------------
--
------- -
------ -
-
----- ---------
------- ------------
-
-
--
-------- -
--- -------------------
--------- ------------------------------
--------- ------------------
------- --------
---
--- -------------------
--------- -------------------------------
--------- -------------------
------- ---------
---
--- -----------------
-
-在 entry 属性中，我们配置了我们所有的页面入口文件路径。在 output 属性中，我们设置了打包输出的路径和文件名。在 module.rules 属性中，我们配置了如何处理 .vue 文件。在 plugins 属性中，我们配置了 HtmlWebpackPlugin 和 VueLoaderPlugin 插件。
需要注意的是，HtmlWebpackPlugin 插件需要在每一个入口文件中都使用一次，且注意传入的参数，比如 template 属性需要与入口文件的模板路径一致，filename 属性需要与打包后的文件路径一致，chunks 属性需要设置该入口所需要的公共资源。
vue.config.js 配置
以下为一个基础的 vue.config.js 配置：
-- -------------------- ---- -------
-------------- - -
------------- ------ -- -
------------------------------ -- -
-------------- - -----
------ ----
--
--
------ -
----- -
------ -------------------------
--------- --------------------
--------- ------------------
------ ----- ------
------- ----------------- --------------- -------
--
------ -
------ --------------------------
--------- --------------------
--------- -------------------
------ ------ ------
------- ----------------- --------------- --------
-
-
-在 chainWebpack 中，我们设置了 HtmlWebpackPlugin 插件的 minify 选项为 false，关闭了压缩，并且使用了 pages 选项，配置了每一个页面的入口、模板、文件名、标题和需要的公共资源。
实现多页面
在完成上述配置后，我们就可以开始实现多页面应用了。
我们首先需要在 src 目录下新建一个名为 pages 的文件夹，用于存放每个页面的入口文件和模板。
接下来，我们每添加一个页面，可以按照如下步骤进行：
- 在 pages 文件夹下新建一个文件夹，用来存放该页面的资源文件，比如 js 文件、css 文件等。
- 在该文件夹下新建一个 main.js 文件，作为该页面的入口文件。
- 在该文件夹下新建一个 index.html 文件，作为该页面的模板文件。
- 在 webpack 配置文件和 vue.config.js 配置文件中分别添加该页面的入口和插件等配置。
以 home 页面为例，它的文件结构应如下：
src
|-pages
|-home
|-main.js
|-index.html
|-style.css其中，main.js 如下：
import Vue from 'vue'
import App from './App.vue'
Vue.config.productionTip = false
new Vue({
render: h => h(App)
}).$mount('#app')index.html 如下：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
----------- ------------
----- ---------------- -------------------
-------
------
---- ---------------
---- ----- ----- ---- -- ---- -------- ---
-------
-------接下来，我们可以运行如下命令，进行项目的打包输出：
npm run build
常见问题
vue-mpa 使用过程中，可能会遇到如下问题：
如何引用公共资源？
我们可以使用 webpack 的代码分割功能和 vue.config.js 的 chunks 配置来实现需要的公共资源。
具体步骤为：
- 在 src 目录下新建一个名为 assets 的文件夹，用于存放公共资源，比如 css 文件、js 文件等。
- 在公共资源所在的文件夹下新建一个名为 index.js 的文件，用于导出需要的公共资源。
- 在每个页面的入口文件中分别引用需要的公共资源。
比如，我们新建一个 test.css 文件并放在 assets 文件夹下：
body {
margin: 0;
padding: 0;
}然后，我们新建一个 assets/index.js 文件来导出这个 test.css 文件：
import './test.css'
之后，我们在 home 页面的入口文件 main.js 中，可以这样引用公共资源：
import '../assets'
这样，我们就可以将公共资源打包到每个页面中了。
如何处理静态资源路径？
在多页面应用中，引用静态资源时，可能会因为相对路径错误而加载失败。
解决方法为使用绝对路径。我们可以使用一个 vue-cli 插件 html-webpack-tags-plugin 来实现自动添加绝对路径。
具体步骤如下：
- 首先，我们需要在项目中安装该插件：
npm install html-webpack-tags-plugin --save-dev
- 接着，在 vue.config.js 配置文件的 chainWebpack 方法中，新增一个插件：
-- -------------------- ---- -------
----- --------------------- - -----------------------------------
-------------- - -
------------- ------ -- -
-----------------------------------------
--------------------------- -
-
------- ------
----- -
-
----- -----------------------------------
----------- -----
--
-
----- ----------------------------------
----------- -----
-
-
-
--
-
-其中，我们把静态资源放在了 https://cdn.example.com 中，可根据实际情况修改。
这样，我们就可以自动给每个页面中的 head 标签加上绝对路径了：
<head> <meta charset="utf-8"> <title>Home Page</title> <link rel="stylesheet" href="https://cdn.example.com/test.css" data-vue-ssr-id="0"> <script type="text/javascript" src="https://cdn.example.com/test.js" defer=""></script> </head>
总结
通过本文，我们了解了如何使用 vue-mpa 来构建多页面应用，包括配置 webpack 和 vue.config.js 文件，实现多页面以及处理常见问题等。希望读者能在实际项目中运用到所学知识，从而更好地完成前端开发需求。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005607b81e8991b448dead0