Vue3中的mpa与history router实践

本文是为了记录解决mpa与history router的应用实践，如果使用hash router则不需要这样复杂的配置，但是会牺牲一点url美观性。这让我想起了乔布斯的一次采访，记者问你如何知道一些前人未涉及的领域中要如何行动？他所：这关乎你的品味。

使用的软件版本：

"vue": "^3.4.15",
"vue-router": "^4.2.5",
"vite": "^5.1.4",
"vite-plugin-virtual-mpa": "^1.11.0",

Why Mpa Plugin？

为什么需要一个vite-mpa插件呢？

vite其实官方支持mpa，假设有以下路径：

pageA
    |- index.html
pageB.
    |- index.html
vite.config.js

那么在项目启动的时候，可以通过ip:port:/pageA/index.html和ip:port:/pageB/index.html来进行访问。 但是如果你不想使用html的路径，比如路径很长你想使用一个更简短的，或者去掉html后缀，这时候官方方案就无能为力，需要我们的插件闪亮登场了。

What is vite-plugin-virtual-mpa

vite官方整理了awesome vite插件合集，可以在这里搜索关键字查看。vite-plugin-virtual-mpa是一个较新的且在持续维护的插件，核心功能有二：

  1. virtual: 根据你工程中的html模板，可以生成一个虚拟的html文件。比如说多个页面可以共用一个模板，模板里还可以通过ejs来针对不同的页面注入不同的内容，方便针对不同的html集中管理。这也是其名字中virtual的含义。
  2. 在页面访问的时候，根据路由匹配命中的html文件，并返回html内容。这样可以避免找不到html导致的404.