Vue——如何在安卓项目中加载离线vue项目

小欣儿2023-08-21 13:34

最近在做一个离线工单的功能，为了直接复用原来在线H5的代码，我希望将它放到安卓本地来加载，做法比较简单，无非就是npm run build打包，然后把包放到安卓项目的assets目录下，然后按照正常加载webview的方式加载。期间遇到了一些问题，总结下：

1、打包以后的离线在访问时提示访问路径错误，index.html打开是空白

解决方案：
1、修改使用路由方式，将路由模式从history换成hash

javascript 复制代码

const router = new VueRouter({
  mode: "hash",
  base: process.env.BASE_URL,
  routes
});

关于mode的介绍参考官网：https://v3.router.vuejs.org/zh/api/#mode

2、修改路由的baseUrl配置

上述代码中的process.env.BASE_URL应配置为'./'，否则Webview中的asset文件访问路径不匹配，会出现file:///xxx/android_asset/dist/index.html的情况

2、离线模式下路由怎么跳转？

首先我们应该明确，打开index.html会进入到App.vue页面，所以我们可以在这个页面加判断，通过截取路径上携带的参数进行路由跳转。

javascript 复制代码

App.vue
mounted() {
    if (isOfflineMode()) {
      //isOfflineMode()可以通过url是否为http地址来判断
      let path = getQueryString("path");
      this.$router.push({ path, query: { title: getQueryString("title") } });
    }
  },

3、Uncaught Error: Provide the "history" option when calling "createRouter()"

vue3项目中控制台报了这个错误

原因:在router文件里面没有定义history

javascript 复制代码

import { createRouter } from 'vue-router';
const router = createRouter({
    routes,
});

修改为：

javascript 复制代码

import { createRouter , createWebHashHistory } from 'vue-router';
const router = createRouter({
    history:createWebHashHistory(),
    routes
})

不同的历史模式参考官网描述：https://router.vuejs.org/zh/guide/essentials/history-mode.html