Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
1.2k views
in Technique[技术] by (71.8m points)

web deployment - 404 Failed to load resource Deploying Flutter Web App to GitHub Pages

I am trying to deploy my Flutter app to GitHub Pages. App runs fine with flutter run -d chrome and builds successfully using flutter build web --release

I push the code to my repository: https://github.com/learyjk/superpacecalcweb

Deployment Activity Log shows successful deployment. But when I click the "View Deployment" button I just get a blank page. Javascript console says:

Failed to load resource: server responded with status of 404 () https://learyjk.github.io/main.dart.js

I have tried to append /index.html to the end of the URL as well but no luck.

Any ideas? The error output is not very verbose, so I don't quite know where to start...

GitHub pages link: https://learyjk.github.io/superpacecalcweb/

Thank you!

enter image description here

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Reply

0 votes
by (71.8m points)

There is <base href=''/> tag in your index.html. Change it to the base path of your github repo. In this case this would be <base href="/superpacecalcweb/"/>. If you don't have it you can add it inside the <head> tag.

Basically the problem is flutter tries to locate main.dart.js file without considering the base path of your deployment as you haven't configured the base tag with correct path. This is common issue while deploying flutter web app or any web app for the sake if the hosting provider adds an additional path to main domain.

You can see that the main.dart.js is available through the following link. https://learyjk.github.io/superpacecalcweb/main.dart.js

Please do note that while testing locally you will still have to set it back to href="/". Otherwise the local deployment won't work. There is an open issue to make this configurable.


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
OGeek|极客中国-欢迎来到极客的世界,一个免费开放的程序员编程交流平台!开放,进步,分享!让技术改变生活,让极客改变未来! Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...