将vue项目打包通过webview套为Android项目

SunMoon_444

已于 2023-05-18 11:38:58 修改

阅读量2.2k

点赞数 6

文章标签： android vue.js webview

于 2023-05-17 16:30:45 首次发布

本文链接：https://blog.csdn.net/SunMoon_444/article/details/130727816

版权

Android webview套壳项目

事情是这样的，要在pad端做一个可展示数据的应用程序，因为原有项目是vue项目，且不需改动，所以将Vue项目打包，通过安卓项目访问离线文件即可

一、创建Android项目

参考：https://blog.csdn.net/sxfzu/article/details/88890513
如果是通过网络访问url需要在清单文件中增加一下代码：

	<uses-permission android:name="android.permission.INTERNET" />
    <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
    <uses-permission android:name="android.permission.ACCESS_WIFI_STATE" />

在这里插入图片描述

如果增加了以上代码仍然访问不了，就将app从模拟器上卸载，再重新发布。（ps：我就是这样找了好久，不知道为什么）

二、设置状态栏为全透明或半透明

https://blog.csdn.net/weixin_39001306/article/details/81745133
这个博主的代码直接拿来就可以用，已经一键三连了！

三、访问离线文件

通常情况下我们打包Vue项目生成dist文件夹，直接访问里面的index.html是空白的，所以需要先修改配置能够在打包之后直接访问。

修改build下utils.js文件，修改为如下图：
修改config下index.js,修改为如下图：
执行npm run build
在Android项目中右击app文件夹创建文件资源目录
将打包后的dist文件放入assets目录中
加载index.html文件入口

	WebView webView=(WebView)findViewById(R.id.webview);
    webView.getSettings().setJavaScriptEnabled(true);
    webView.setWebViewClient(new WebViewClient());
    webView.loadUrl("file:///android_asset/dist/index.html"); //访问index.html
    webView.getSettings().setCacheMode(WebSettings.LOAD_CACHE_ELSE_NETWORK);