问题:Android WebView (Xamarin) 中的 VueJS

我正在尝试将使用 VueJS 开发的小型混合 C#/单页应用程序捆绑为 android 应用程序。我们有一些类,它们创建和图像并将其发送到 ESC 打印机。如果我们从服务器加载应用程序,一切正常:

theView.LoadUrl( "https://our-app.our-server.com" );

但是,当我们从 file:///android_asset/index.html 加载它时,它会启动,但页面是空的。

我在 chrome 调试器中看到 VueJS 成功创建了一些元素:

<div data-app="true" class="application app theme--light">
  <div class="application--wrap">
    <main class="v-content" data-booted="true" style="padding: 0px;">
      <div class="v-content__wrap"></div>
    </main>
  </div>
</div>

控制台中没有错误,只是一个空屏幕。

我错过了什么?

解答

经过一番挣扎之后,我的问题的根源似乎在于构建,为 JS 文件和资产生成绝对路径。我更改了 vue.config.js 中的两个设置以使其正常工作。

请注意,以前的解决方案也有效,但它隐藏了真正的问题而不是解决它。此外,此解决方法仅适用于 android(我没有找到如何在 iOS 上执行相同操作)

这是我所做的:我将 assetsDir 和 publicPath 更改为空字符串以强制构建生成相对路径。

    module.exports = {
      assetsDir: '',
      publicPath: '',
      .....
    }

此外,我必须关闭路由器的历史模式并定义一个额外的路由:

    {
      path: '/index.html',
      name: 'index',
      component: ..........,
    }

这样,从 iOS 上的文件系统提供服务也不会出现问题。

------------------- 替代解决方法 ---------------------

以下解决方案仅适用于 android:

我想到了。这是文件:// 网址!更改为 http://localhost 就可以了(+几行代码)

同样的原因,为什么当您直接从文件系统打开某些页面时它们就无法工作。我记得,为了查看一些网页,我必须创建一个本地网络服务器,否则我几乎看不到任何东西,因为当你以这种方式打开页面时,浏览器的限制更多。一旦我将其更改为 http://localhost 并修复了我的 ShouldInterceptRequest 以从 android Assets 为“http://localhost”提供任何请求,并且一切正常。

不知道为什么(还) - 我必须以这种方式加载索引:

wv.LoadDataWithBaseURL( "http://localhost", new StreamReader( Assets.Open( "index.html" ) ).ReadToEnd(), "text/html", "UTF-8", null );

代替

wv.LoadUrl( "http://localhost/index.html" );

当请求 http://localhost 时,我还必须覆盖 WebViewClient 以从资产中提供内容:

    // view client to serve the web from assets folder correctly
    public class MyWebViewClient : WebViewClient {

        private AssetManager m_Assets;

        public MyWebViewClient( AssetManager assets ) {
            m_Assets = assets;
        }

        public static string GetMimeType( String url ) {
            String type = null;
            String extension = url.Split( '.' ).Last();
            if ( extension != null ) {
                if ( extension == "css" ) {
                    return "text/css";
                } else if ( extension == "js" ) {
                    return "text/javascript";
                } else if ( extension == "png" ) {
                    return "image/png";
                } else if ( extension == "gif" ) {
                    return "image/gif";
                } else if ( extension == "jpg" ) {
                    return "image/jpeg";
                } else if ( extension == "jpeg" ) {
                    return "image/jpeg";
                } else if ( extension == "woff" ) {
                    return "application/font-woff";
                } else if ( extension == "woff2" ) {
                    return "application/font-woff2";
                } else if ( extension == "ttf" ) {
                    return "application/x-font-ttf";
                } else if ( extension == "eot" ) {
                    return "application/vnd.ms-fontobject";
                } else if ( extension == "svg" ) {
                    return "image/svg+xml";
                }

                type = "text/html";
            }

            return type;
        }

        public override WebResourceResponse ShouldInterceptRequest( WebView view, IWebResourceRequest request ) {

            if ( request.Url != null && request.Url.Path != null && request.Url.Host == "localhost" ) {
                var mimeType = GetMimeType( request.Url.Path );
                var fileUrl = request.Url.Path
                    .Replace( "file://", "" )
                    .Replace( "android_asset/", "" )
                    .Trim( '/' );

                string extension = request.Url.Path.Split( '.' ).Last();;
                string fileEncoding = "application/octet-stream";
                if ( extension.EndsWith( "html" ) || extension.EndsWith( "js" ) || extension.EndsWith( "css" ) )
                    fileEncoding = "UTF-8";

                try {
                    return new WebResourceResponse( mimeType, fileEncoding, m_Assets.Open( fileUrl ) );
                } catch {
                    // ignore
                }
            }

            return base.ShouldInterceptRequest( view, request );
        }
    }