Flutterでビルドしたwebページが表示できなかった時の対処法(メモ的な)

ポテト=ルシフェル

あくまでメモなのですべての人に当てはまるとは限りませんが、これで上手くいくケースもあると思うので書いておきます。

僕がAndroid StudioでFlutterのアプリを作っているときのことでした。
そもそもFlutterがwebとかwindowsソフトとかも作れるとは知りませんでした。

Android Studioでのデバッグ実行はwebでも問題なくできていました。そもそものプログラムのバクとかでなければ何にも怒られていませんでした。

とりあえず完成して、Android Studioの"Build"の部分に"web"はなかったのでコマンドプロンプトで直接

Flutter build web

コマンドを打ちました。

./build/webの部分にちゃんとHTMLファイルやらJavaScriptファイルやらができていました。

しかしローカル環境で実行してみると

なんとまあなんも表示されません。
先に結果を言うとローカル環境でやるもんじゃないんだと思います。
(ですが、GitHubにそのまま上げれば動くという話でもありませんでした。)

とりあえずF12押してデベロッパーツールを見てみると

flutter.js:1
 Failed to load resource: net::ERR_FILE_NOT_FOUND
index.html:46
 Uncaught ReferenceError: _flutter is not defined
    at index.html:46:7
index.html:1
 Access to internal resource at 'file:///C:/manifest.json' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, chrome-untrusted, https.

flutter.jsが読み込めない、_flutterが定義されてない、このプロトコルだと'file:///C:/manifest.json'にアクセスできない
と怒られていました。

_flutterはflutter.jsに定義されているのでflutter.jsが読み込めなかったら使えないのも当たり前ですが、なぜ読み込めなかったのでしょうか。
それに、プロトコルに関してはローカル環境なので分かりますが、なぜ'C:/manifest.json'にアクセスしようとしているのでしょうか。

どうやら指定してある相対パスが絶対パスとして認識されているようです。

ではどうしたらいいでしょう。

素直にパスを全部書き換えます。
追記2回目:そんなことしなくてもあるところを1カ所書き換えればいいです。

プロトコルとかの問題があるので、
(ビルドしたweb版をわざわざローカル環境で実行することもないですし)
上げた状態のURIに書き換えます。
(URIは一般にURLのことだと思ってもらって構いません)

僕は自分のGitHubの

ここに上げるつもりだったので(後で別の場所に移動しましたが)、
"https://potatotimekun.github.io/programming/Dart/cipher/web/"
という文字列(ディレクトリの構成を見て、掘られてたらその分のパスを追加する)を、生成されたファイル中のURIと思われる部分全てに追加しました。
index.htmlの冒頭の方にあるbaseタグのhref属性に書いてください。
どうやらbaseタグはURIのベース、すなわちhref属性で相対URIのカレントURIを指定できるとのことです。
追記ばっかですいません(((

大体一番長くなると思われるmain.dart.jsにはそれらしきものはなかったので安心しました。
追記:main.dart.jsの内容を書き換えていないことによって、アイコンウェジットのアイコンが読み込まれない問題がありました。
main.dart.js内を.jsonとかで検索してマニフェストのURIっぽいものを書き換えれば直ります。
ちなみにそのときに上記のURIからさらに"assets/"を追加しました。指定しているファイルの位置をよく見て書き換えてください。

canvaskit.jsというのもありましたが、おそらくモジュール的なものなので問題なさそうです。

ちなみにこれをGitHubに上げた結果、このリポジトリで元々JavaScriptの割合が他の言語に埋もれてる程度だったのが82%とかになりました…w

とりあえずこれで上げてみたらこの通り

しっかりページが表示されました。(こちらに移動しました https://potatotimekun.github.io/flutter_web/cipher/)

なんかURI部分が変な表記になりますが、どうやらFlutterの仕様らしいです。ここは今後に期待です。

ということで無事Flutterのweb版も使えるようになりました。

今までの記事にFlutterの話は特にないですが色々プログラミングの記事書いてるのでよければそちらも～

この記事が気に入ったらサポートをしてみませんか？