“flutter build web” 构建一个空的 index.html 文件。

huangapple go评论83阅读模式
英文:

"flutter build web" builds an empty index.html file

问题

当我尝试运行flutter create web将我的Flutter项目转换为Web应用程序时,我在Web浏览器中打开index.html文件,但页面是空白的。您有任何想法为什么会这样吗?以下是index.html文件的内容:

<!DOCTYPE html>
<html>
<head>
  <!--
    If you are serving your web app in a path other than the root, change the
    href value below to reflect the base path you are serving from.

    The path provided below has to start and end with a slash "/" in order for
    it to work correctly.

    For more details:
    * https://developer.mozilla.org/en-US/docs/Web/HTML/Element/base

    This is a placeholder for base href that will be replaced by the value of
    the `--base-href` argument provided to `flutter build`.
  -->
  <base href="./">

  <meta charset="UTF-8">
  <meta content="IE=Edge" http-equiv="X-UA-Compatible">
  <meta name="description" content="A new Flutter project.">

  <!-- iOS meta tags & icons -->
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-status-bar-style" content="black">
  <meta name="apple-mobile-web-app-title" content="boop">
  <link rel="apple-touch-icon" href="icons/Icon-192.png">

  <!-- Favicon -->
  <link rel="icon" type="image/png" href="favicon.png"/>

  <title>boop</title>
  <link rel="manifest" href="manifest.json">

  <script>
    // The value below is injected by flutter build, do not touch.
    var serviceWorkerVersion = "4031280537";
  </script>
  <!-- This script adds the flutter initialization JS code -->
  <script src="/flutter.js" defer></script>
</head>
<body>
  <script>
    window.addEventListener('load', function(ev) {
      // Download main.dart.js
      _flutter.loader.loadEntrypoint({
        serviceWorker: {
          serviceWorkerVersion: serviceWorkerVersion,
        },
        onEntrypointLoaded: function(engineInitializer) {
          engineInitializer.initializeEngine().then(function(appRunner) {
            appRunner.runApp();
          });
        }
      });
    });
  </script>
</body>
</html>

在之前的帖子中,href曾经是问题,但在多次更改后,我开始认为这个解决方案在这里不起作用。flutter doctor也没有报告任何问题。我尝试过的其他href路径包括:"/"、"/build/"、"/web/"和"/build/web/"。

英文:

when I try to run flutter create web to make my flutter project into a web app, I open the index.html file in a web browser and the page is empty. Do you have any idea why? Here is the contents of the index.html file:

&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
&lt;!--
If you are serving your web app in a path other than the root, change the
href value below to reflect the base path you are serving from.
The path provided below has to start and end with a slash &quot;/&quot; in order for
it to work correctly.
For more details:
* https://developer.mozilla.org/en-US/docs/Web/HTML/Element/base
This is a placeholder for base href that will be replaced by the value of
the `--base-href` argument provided to `flutter build`.
--&gt;
&lt;base href=&quot;./&quot;&gt;
&lt;meta charset=&quot;UTF-8&quot;&gt;
&lt;meta content=&quot;IE=Edge&quot; http-equiv=&quot;X-UA-Compatible&quot;&gt;
&lt;meta name=&quot;description&quot; content=&quot;A new Flutter project.&quot;&gt;
&lt;!-- iOS meta tags &amp; icons --&gt;
&lt;meta name=&quot;apple-mobile-web-app-capable&quot; content=&quot;yes&quot;&gt;
&lt;meta name=&quot;apple-mobile-web-app-status-bar-style&quot; content=&quot;black&quot;&gt;
&lt;meta name=&quot;apple-mobile-web-app-title&quot; content=&quot;boop&quot;&gt;
&lt;link rel=&quot;apple-touch-icon&quot; href=&quot;icons/Icon-192.png&quot;&gt;
&lt;!-- Favicon --&gt;
&lt;link rel=&quot;icon&quot; type=&quot;image/png&quot; href=&quot;favicon.png&quot;/&gt;
&lt;title&gt;boop&lt;/title&gt;
&lt;link rel=&quot;manifest&quot; href=&quot;manifest.json&quot;&gt;
&lt;script&gt;
// The value below is injected by flutter build, do not touch.
var serviceWorkerVersion = &quot;4031280537&quot;;
&lt;/script&gt;
&lt;!-- This script adds the flutter initialization JS code --&gt;
&lt;script src=&quot;/flutter.js&quot; defer&gt;&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;script&gt;
window.addEventListener(&#39;load&#39;, function(ev) {
// Download main.dart.js
_flutter.loader.loadEntrypoint({
serviceWorker: {
serviceWorkerVersion: serviceWorkerVersion,
},
onEntrypointLoaded: function(engineInitializer) {
engineInitializer.initializeEngine().then(function(appRunner) {
appRunner.runApp();
});
}
});
});
&lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;

In previous posts, the href has been the problem, but after changing it multiple times I've grown to think that that solution won't work here. flutter doctor does not report any problems either. Other href paths I have tried include: "/", "/build/", "/web/", and "/build/web/".

答案1

得分: -1

为了解决这个问题,我不得不使用Firebase托管网站并关闭树摇。这两件事情都能够解决我的问题。

英文:

In order to fix this problem, I had to host the website with Firebase and turn tree shaking off. Doing both of these things was able to fix the problem for me.

huangapple
  • 本文由 发表于 2023年6月30日 03:53:58
  • 转载请务必保留本文链接:https://go.coder-hub.com/76584231.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定