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");