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

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

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

css 复制代码

npm i @vitejs/plugin-legacy -D

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

css 复制代码

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

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

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

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

ini 复制代码

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支持和支持缩放，示例代码如下：

scss 复制代码

//获取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文件，代码如下：

arduino 复制代码

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

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

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

scala 复制代码

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插件时候遇到警告，一定按照提示继续安装，别轻易放弃。希望这篇文章能帮到你，方便的话也请点赞加关注，一起踩坑一起进步。