让Vite+Vue3项目在Android端离线打开(不需要起服务)

简介: 让Vite+Vue3项目在Android端离线打开(不需要起服务)

通常Vue3打包的项目只能放在web服务器里面,用 http://服务器地址 的方式运行,双击 index.html 是无法运行的。

如果要在本地运行,可以按照下面的步骤来实现。

首先,安装@vitejs/plugin-legacy,终端执行命令

npm i @vitejs/plugin-legacy -D

然后打开vite.config.js文件,加入如下配置:

import legacy from '@vitejs/plugin-legacy';

export default defineConfig({
   
  base:"./",
  plugins:[
    vue(),
    legacy({
   
      targets:["defaults","not IE 11"],
    })
  ]
});

其中,base 和 plugins 配置项要注意别搞错了。

然后,在项目打包完成后,运行下面的 nodejs 脚本:

const fs = require("fs");
const {
   JSDOM} = require("jsdom");

const dom = new JSDOM(fs.readFileSync("./dist/index.html"));

//删除包含type="module"的标签
var tags = dom.window.document.querySelectorAll("*[type=\"module\"]");
for(var i = 0 ; i < tags.length; i++){
   
    var tag = tags[i];
    tag.parentElement.removeChild(tag);
}

//需要把 script 标签里面的 nomodule,crossorigin 属性删掉
tags = dom.window.document.querySelectorAll("SCRIPT[nomodule]");
for(var i = 0 ; i < tags.length; i++){
   
    var tag = tags[i];
    tag.removeAttribute("nomodule");
}

tags = dom.window.document.querySelectorAll("SCRIPT[crossorigin]");
for(var i = 0 ; i < tags.length; i++){
   
    var tag = tags[i];
    tag.removeAttribute("crossorigin");
}

//data-src换成src
tags = dom.window.document.querySelectorAll("SCRIPT[data-src]");
for(var i = 0 ; i < tags.length; i++){
   
    var tag = tags[i];
    var src = tag.getAttribute("data-src");
    tag.removeAttribute("data-src");
    tag.setAttribute("src", src);
}

var html = "<!DOCTYPE html>\r\n" + dom.window.document.documentElement.outerHTML;
fs.writeFileSync("./dist/index.html", html);
console.log("成功修改dist/index.html");

看到最后的打印,说明index.html 文件已经修改完成了,此时双击dist目录中index.html文件看到已经可以在浏览器中正常打开了,而且没有借助服务器。

接着,在Android项目中创建webview,并设置设置开启js支持和支持缩放,示例代码如下:

//获取webview
WebView webView = findViewById(R.id.webview);
//设置为ChromeClinet 才能执行js代码
WebChromeClient webChromeClient = new WebChromeClient();
webView.setWebChromeClient(webChromeClient);
//设置开启js支持
webView.getSettings().setJavaScriptEnabled(true);
// 是否支持缩放
webView.getSettings().setSupportZoom(true);

最后还需要加载本地index.html文件,代码如下:

//加载本地html
webView.loadUrl("file:///android_asset/index.html");

这里的index.html文件,就是我们打包前端项目后生成的dist文件夹下的入口文件, 我们需要将整个dist下文件资源拷贝到Android项目的assets下才能完全加载显示。

再次附上完整的代码如下:

package com.badao.webviewdemo;

import androidx.appcompat.app.AppCompatActivity;

import android.os.Bundle;
import android.webkit.WebChromeClient;
import android.webkit.WebView;

public class MainActivity extends AppCompatActivity {
   

    @Override
    protected void onCreate(Bundle savedInstanceState) {
   
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        //获取webview
        WebView webView = findViewById(R.id.webview);
        //设置为ChromeClinet 才能执行js代码
        WebChromeClient webChromeClient = new WebChromeClient();
        webView.setWebChromeClient(webChromeClient);
        //设置开启js支持
        webView.getSettings().setJavaScriptEnabled(true);
        // 是否支持缩放
        webView.getSettings().setSupportZoom(true);
        //加载本地html
        webView.loadUrl("file:///android_asset/offLineTileMap.html");
    }
}

再次提醒,如果你在安装@vitejs/plugin-legacy插件时候遇到警告,一定按照提示继续安装,别轻易放弃。希望这篇文章能帮到你,方便的话也请点赞加关注,一起踩坑一起进步。

相关文章
|
3天前
|
前端开发 JavaScript 测试技术
android做中大型项目完美的架构模式是什么?是MVVM吗?如果不是,是什么?
android做中大型项目完美的架构模式是什么?是MVVM吗?如果不是,是什么?
24 2
|
4天前
|
XML Java 数据库
安卓项目:app注册/登录界面设计
本文介绍了如何设计一个Android应用的注册/登录界面,包括布局文件的创建、登录和注册逻辑的实现,以及运行效果的展示。
24 0
安卓项目:app注册/登录界面设计
|
17天前
|
IDE Android开发 iOS开发
探索Android与iOS开发的差异:平台选择对项目成功的影响
【9月更文挑战第27天】在移动应用开发的世界中,Android和iOS是两个主要的操作系统平台。每个系统都有其独特的开发环境、工具和用户群体。本文将深入探讨这两个平台的关键差异点,并分析这些差异如何影响应用的性能、用户体验和最终的市场表现。通过对比分析,我们将揭示选择正确的开发平台对于确保项目成功的重要作用。
|
16天前
|
Java Maven 开发工具
第一个安卓项目 | 中国象棋demo学习
本文是作者关于其第一个安卓项目——中国象棋demo的学习记录,展示了demo的运行结果、爬坑记录以及参考资料,包括解决Android Studio和maven相关问题的方法。
第一个安卓项目 | 中国象棋demo学习
|
1天前
|
Java Android开发 Swift
安卓与iOS开发对比:平台选择对项目成功的影响
【10月更文挑战第4天】在移动应用开发的世界中,选择合适的平台是至关重要的。本文将深入探讨安卓和iOS两大主流平台的开发环境、用户基础、市场份额和开发成本等方面的差异,并分析这些差异如何影响项目的最终成果。通过比较这两个平台的优势与挑战,开发者可以更好地决定哪个平台更适合他们的项目需求。
14 1
|
3天前
|
编译器 Android开发
配置环境变量,使CMakeLists.txt可直接使用Android NDK工具链编译项目
配置环境变量,使CMakeLists.txt可直接使用Android NDK工具链编译项目
|
1月前
|
IDE 开发工具 Android开发
安卓与iOS开发对比:平台选择对项目成功的影响
【9月更文挑战第10天】在移动应用开发的世界中,选择正确的平台是至关重要的。本文将深入探讨安卓和iOS这两大主要移动操作系统的开发环境,通过比较它们的市场份额、开发工具、编程语言和用户群体等方面,为开发者提供一个清晰的指南。我们将分析这两个平台的优势和劣势,并讨论如何根据项目需求和目标受众来做出最佳选择。无论你是初学者还是有经验的开发者,这篇文章都将帮助你更好地理解每个平台的特性,并指导你做出明智的决策。
|
1月前
|
Java 开发工具 Android开发
安卓与iOS开发:平台选择对项目成功的影响
在移动应用开发的浩瀚宇宙中,安卓和iOS两大星系璀璨夺目,各自拥有独特的光芒。本文将穿梭于这两个平台之间,探讨它们在开发环境、用户群体、成本效益等方面的差异,以及这些差异如何影响一个项目的航向和终点。我们将从初学者的视角出发,逐步深入,揭示选择合适平台的重要性,以及如何根据项目需求做出明智的选择。无论你是即将启航的新手开发者,还是已经在这片星海中航行的老手,这篇文章都将为你提供有价值的导航信息。
45 2
|
1月前
|
调度 Android开发 UED
Android经典实战之Android 14前台服务适配
本文介绍了在Android 14中适配前台服务的关键步骤与最佳实践,包括指定服务类型、请求权限、优化用户体验及使用WorkManager等。通过遵循这些指南,确保应用在新系统上顺畅运行并提升用户体验。
91 6
|
1月前
|
Java 开发工具 Android开发
探索安卓与iOS开发的差异:平台选择对项目的影响
在移动应用开发的广阔天地中,安卓和iOS两大平台各自占据着重要的位置。本文旨在深入探讨这两个平台在开发过程中的主要差异,包括编程语言、开发工具、用户界面设计、性能优化以及市场分布等方面。通过对比分析,我们将揭示平台选择如何影响项目规划、执行效率和最终成果,为开发者在选择适合自己项目需求的平台时提供参考依据。