通常Vue3打包的项目只能放在web服务器里面，用 http://服务器地址 的方式运行，双击 index.html 是无法运行的。
如果要在本地运行，可以按照下面的步骤来实现。
首先，安装@vitejs/plugin-legacy，终端执行命令
npm i @vitejs/plugin-legacy -DAI 代码解读
然后打开vite.config.js文件，加入如下配置：
import legacy from '@vitejs/plugin-legacy';
export default defineConfig({
base:"./",
plugins:[
vue(),
legacy({
targets:["defaults","not IE 11"],
})
]
});
AI 代码解读
其中，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");
AI 代码解读
看到最后的打印，说明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);
AI 代码解读
最后还需要加载本地index.html文件，代码如下：
//加载本地html
webView.loadUrl("file:///android_asset/index.html");
AI 代码解读
这里的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");
}
}
AI 代码解读
再次提醒，如果你在安装@vitejs/plugin-legacy插件时候遇到警告，一定按照提示继续安装，别轻易放弃。希望这篇文章能帮到你，方便的话也请点赞加关注，一起踩坑一起进步。
