Vue项目配置

概述

1. Vue单页面项目嵌入到安卓WebView中时,需要做相关配置,具体配置将在下文中详解;

2. 安卓中的WebView使用的Chrome内核版本较低,因此在开发时需要注意浏览器兼容性问题;通过vConsole可查看Chrome版本,Android 11中的WebView是Chrome 83;

3. WebView的错误提示不明显、不准确,排错时要格外注意,不要被误导;

Vue项目配置

1.0> 修改路由为Hash模式

const router = createRouter({
    history: createWebHashHistory(),
    routes,
});

2.0> 编辑 vite.config.ts 配置,设置base为“./”

export default defineConfig(({ command, mode }) => {
    return {
        base: "./", // 公共基础路径,

        // ....
    }
}  

3.0> Vue项目安装 VConsole 组件,以辅助开发调试

## 安装
npm install vconsole

## 在main.ts中引入
import VConsole from 'vconsole';
const vConsole = new VConsole();

注意事项

在安卓中通过 WebView 加载本地网页时,不能在本地网页中使用 Fetch 请求;因为 Fetch API 不支持以 file:/// 打开的页面,如下:

webView.loadUrl("file:///android_asset/dist/index.html");
举报

© 著作权归作者所有


1