【实践】在Uniapp webview中使用本地SPA页面

uniapp webview可以引用两种资源方式

方式一：在线链接，比如juejin.cn/following 这种方式其实很简单

方式二：打包后的本地文件，这个是我今天重点要说的

1. 【spa】找到vite.config.js修改base为./

2. 【spa】修改路由模式为createWebHashHistory()，非hash模式会导致识别异常

3. 【spa】打包spa项目，并复制dist到项目根目录/hybrid/html下，或者/static下，我以放入/static为例，项目目录如下图

4. 【uniapp】根据需求配置webview地址，/static/dist/index.html#/about，关键点在配置，有时候你配置的是spa的路由主页的时候在手机上能正常显示，但是配置了其他页面就显示异常，请注意是不是#号前有/，或者检查上面第一步和第二步是否没有配置

⚠️ 注意：路径中井号前不要加/否则在手机上显示的是源代码

5. 【hbuilder-uniapp】运行到模拟器

6. 看效果，在手机上或者浏览器里都能正常访问了

如果你想要在本地开发的web和uniapp下静态文件之间切换，可以自定义一个前缀，比如下面，当然，看你需求咯

export const webHost = 'http://局域网IP:5001#'
// export const webHost = '/static/dist/index.html#'