vue3+vite+ts+pinia移动端多页面

clx308

1963人浏览 · 2024-04-03 10:22:57

clx308 · 2024-04-03 10:22:57 发布

前言

当各位看到这篇博客，可能是正好工作上非常刚需的时候，对于这类伙伴，我只好说声抱歉，我的这个代码在我眼里认为其实是有问题的，这篇博客与其说是分享个人的经历，还不如说是一篇向大佬们的请教，希望有大佬指点。

重点

最新代码地址，耐心看完，谢谢🙏
最新代码，new_dev分支，拉下代码，安装包就能用，后面可以根据业务二次开发
https://github.com/cl-x/vue-multipage/tree/new_dev

参考

这是我参考的大佬博客，他的目录结构都是我比较赞同的，但是我在实现过程中确实遇到了好几个问题
博客地址

目的

我的本意是想搭建一个以vue3+vite+ts+pinia的多页面移动端框架，在这之前我也看了vite官网的介绍，对于多页面的应用模式，个人感觉很简洁，于是我参考了很多位大佬的分享，然后在这些人的基础上做了点改动，这里贴下我的目录结构。
在这里插入图片描述

这是vite官网的
在这里插入图片描述
可以对比下，我将最外层的main.js和index.html给删除。
以下是我的想法或者说目的

1. 是pages下面就是每一个单页面，启动项目进入的是pages下面的index.html入口文件，入口文件是为了避免打开进来时空白页面的，我希望打开是进入各个页面的入口，如下这样，当我在地址栏加上某一个具体页面的html中，能跳到具体的页面，没有就进入这个初始入口。
1. 每个页面之间能相互跳转到页面中的某个路由。
1. 公共的数据能放到外面单独处理，每个页面中都能修改并获取到公共的数据。
1. 打包能全部打包或者单个分批打包。
1. 脚本能创建空白的页面基础文件。

注意

入口文件被我迁到了src/pages，那么注意配置文件vite.config.ts这里要改下
在这里插入图片描述

过程遇到的问题

1. 入口跳转到子页面空白（暂时解决）

我发现在我入口的html跳进其他页面的时候，这个时候我很简单的写了个超链接a.href=‘pageOne/index.html’，但是进来其实是空白页面，肯定有人说是不是html引的main.ts错了，其实没有错的，http://localhost:9528/pageOne/index.html，本地地址也没错的，但是控制台报了错误。

找不到位置路径，说明这个路径是不存在的，但是应该是进到子页面pageOne里的，我想着是不是路由没有重定向问题，所以加了个重定向，但是还是不行，这个时候我注意到了它的path是这个
path "/pageOne/index.html"
![在这里插入图片描述](https://img-blog.csdnimg.cn/direct/2ceaff64717f4ae482663ba355e9c469.png
所以我抱着试一试的心态换成了这个写法

很幸运，它进来了，页面也不是空白了，而是进到我写的文件了，这个问题可以说短暂的被我解决了
在这里插入图片描述
但是新的问题也接踵而来，刷新一下，回到入口文件了

2. 刷新回到入口文件了（暂时解决）

这样其实是有问题的，因为项目中刷新页面是很常见的，用户刷新下，结果出来了这么个东西，我想很奇怪的吧，而且总不可能不让用户刷新吧，所以我只好继续找方法解决，其实我也纳闷怎么回到了入口页面，我想到的是刷新了，那么整个页面重新加载，而我们配置的root跟文件就是这个入口html啊，所以其实没错，但是这样实际上又是错的，因为我应该显示pageOne下的enter页面的内容啊，研究了半天，我试着把pageOne里面的路由放到二级去处理，最后形成这样
在这里插入图片描述
我感觉我很幸运，但是我讲不出具体的所以然，冥冥中感觉吧，但是毫无疑问这种刷新确实没问题了

3. pageOne子页面跳到pageTwo子页面问题（暂时解决）

正常来说，跳到A子页面跳到B子页面那肯定要从A.html换到B.html了，所以我想着简单的这么实现
在这里插入图片描述
那毫无疑问这是没问题的，但是由于之前写的这个重定向，导致其实不管地址栏怎么加到参数，跳到的页面都是B页面的重定向路有啊

但这并不是我们想要的啊，我想的是能跳到任一路由啊，为此试过了很多方法，我想着是不是路由二级的写法导致的，但是换成一级，之前那个问题一就会出现了，没错就是找不到路径了，为了解决这个问题，我决定写个公共方法，在每个页面的App.vue入口，执行一个pageRedirect函数，通过参数做一个自动的重定向。
在这里插入图片描述
好这么看效果，确实可以了

就目前页面跳转相关的问题看起来都解决完了。我们进入下个问题

4. 公共数据的处理问题（未解决）

我们做多页面应用，其实说到底就是项目比较庞大，再加上可能要嵌套到app或者小程序，所以想按模块拆分出来，但是这其中难免会有些是要共用互通的，当然有人会说缓存，同一域名下，拿到当然没问题，但我并不想什么都放缓存里，我心里想的是想要个独立所有页面的vuex去缓存，所以我想着建一个公共的store，A页面去引入改变值， B页面去获取，然而毫无疑问出问题了我用pinia写了个这么个store
在这里插入图片描述
pageOne使用改变值，pageTwo打印改变后的值

在这里插入图片描述

pageTwo拿到的是1，应该是6的，我在pageOne赋值5了，然后跳到pageTwo页面触发累加一，所以打印出来应该是6，现在是1，说明我的store清空了，这个问题暂时没有妥善的解决掉。

5. 打包问题（暂时解决，也其实未解决）

由于我们在最初的时候配置了root和base为‘/’，就是vite.config.ts文件的这个东西
在这里插入图片描述
这就导致一个问题了，就是这些打包文件必须在服务器的根目录下，但是我公司的配置是不允许这么放置的，一般是要配置比如xx/xxxx/index.html文件夹的，这就会导致我这个地方打包生成最后读取文件路径会不对
在这里插入图片描述
是真的很烦啊，但是如果放在根路径下面，又是能跑起来的，所以这个问题我把它判定解决了，也没解决。