Android WebView加载Nuxt.js 3静态资源问题及解决方案咨询

一、优先方案：修改Nuxt.js配置生成相对路径资源 #

直接在Nuxt.js项目的nuxt.config.ts中配置基础路径为相对路径，构建后所有资源引用会自动转为相对路径，无需修改Android端代码：

export default defineNuxtConfig({
  app: {
    baseURL: './' // 将资源基础路径设为相对路径
  }
})

重新构建项目后，资源路径会从/_nuxt/xxx.css变为./_nuxt/xxx.css，此时用file://<path>/index.html加载WebView即可正常加载所有资源。

二、Android端解决方案 #

如果无法修改Nuxt.js配置，可采用以下两种Android端方案：

1. 通过WebView拦截请求重写路径 #

利用WebViewClient的shouldInterceptRequest方法拦截根相对路径的资源请求，将其转换为本地文件的绝对路径：

webView.setWebViewClient(new WebViewClient() {
    @Nullable
    @Override
    public WebResourceResponse shouldInterceptRequest(WebView view, WebResourceRequest request) {
        String url = request.getUrl().toString();
        // 处理根相对路径的请求（以"/"开头且非http/https协议）
        if (url.startsWith("/") && !url.startsWith("http")) {
            // 替换为本地资源的绝对路径
            String localPath = "file:///sdcard/your-app-dir" + url; // 替换为你的实际资源目录
            try {
                InputStream inputStream = new FileInputStream(new File(Uri.parse(localPath).getPath()));
                // 根据文件后缀设置MIME类型
                String mimeType = MimeTypeMap.getSingleton().getMimeTypeFromExtension(MimeTypeMap.getFileExtensionFromUrl(localPath));
                return new WebResourceResponse(mimeType, "UTF-8", inputStream);
            } catch (FileNotFoundException e) {
                e.printStackTrace();
            }
        }
        return super.shouldInterceptRequest(view, request);
    }
});

注意：需确保应用拥有读取本地文件的权限（如READ_EXTERNAL_STORAGE，Android 13+需适配分区存储规则）。

2. 内置轻量HTTP服务器 #

推荐使用NanoHTTPD，这是一个轻量级、无依赖的Java HTTP服务器库，简洁易集成且维护状态良好。

集成步骤：

1. 在build.gradle中添加依赖：

implementation 'org.nanohttpd:nanohttpd:2.3.1'

2. 创建自定义服务器类，绑定到127.0.0.1（仅本地可访问），处理资源请求：

public class LocalFileServer extends NanoHTTPD {
    private String resourceDir;

    public LocalFileServer(int port, String resourceDir) {
        super("127.0.0.1", port); // 绑定到localhost，仅本地进程能访问
        this.resourceDir = resourceDir;
    }

    @Override
    public Response serve(IHTTPSession session) {
        String uri = session.getUri();
        // 根路径默认返回index.html
        if (uri.equals("/")) {
            uri = "/index.html";
        }
        File file = new File(resourceDir + uri);
        if (file.exists() && file.isFile()) {
            try {
                String mimeType = MimeTypeMap.getSingleton().getMimeTypeFromExtension(MimeTypeMap.getFileExtensionFromUrl(file.getAbsolutePath()));
                return newFixedLengthResponse(Response.Status.OK, mimeType, new FileInputStream(file), file.length());
            } catch (FileNotFoundException e) {
                return newFixedLengthResponse(Response.Status.NOT_FOUND, "text/plain", "File not found");
            }
        }
        return newFixedLengthResponse(Response.Status.NOT_FOUND, "text/plain", "File not found");
    }
}

3. 在Activity中启动服务器，让WebView访问本地服务地址：

// 启动服务器，端口可自定义（如8080）
LocalFileServer server = new LocalFileServer(8080, "/sdcard/your-app-dir"); // 替换为实际资源目录
try {
    server.start();
} catch (IOException e) {
    e.printStackTrace();
}

// WebView访问本地服务器地址
webView.loadUrl("http://127.0.0.1:8080/");

限制外部访问的额外措施：

• 绑定到127.0.0.1而非0.0.0.0，确保只有本设备本地进程能访问。
• 在serve方法中检查请求来源IP，仅允许127.0.0.1的请求。
• 为WebView设置自定义User-Agent，在服务器中验证该标识，拒绝其他来源请求。

内容的提问来源于stack exchange，提问作者Ondřej Želazko