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

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

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

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

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页面,所以我们可以在这个页面加判断,通过截取路径上携带的参数进行路由跳转。

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

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

修改为:

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

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

你可能感兴趣的:(VUE,vue.js,android,前端)