flutter for web first

创建项目

1
2
3
4
5
6
flutter channel dev
flutter upgrade
flutter config --enable-web
cd <into project directory>
flutter create .
pub get
  • 如果要部署，要先build出来
1
flutter build web

run起来

使用webdev可以启动一个web服务器，可能可以改port，试试

1
2
... 此处省略webdev的安装命令
webdev serve

报错，因为flutter for web是预览版，等以后官方更新

1
2
3
webdev could not run for this project.
You have a dependency on `flutter` which is not supported for flutter_web tech preview. See https://flutter.dev/web for more details.
You have a dependency on `flutter_test` which is not supported for flutter_web tech preview. See https://flutter.dev/web for more details.

debug命令，port是随机的，暂时没有找到可以改port的方法

1
2
flutter run -d Chrome
flutter run -d "Web Server"

打命令run起来

可以看到在chrome显示的效果
http://localhost:57313

如果发起请求，还会遇到CORS跨域问题

如请求一个天气api的例子：
http://t.weather.sojson.com/api/weather/city/101280101

一个思路就是将本地的chrome全局解除这个CORS，但是可能会重置一些缓存（如账号，密码等）

目前我用的是nginx来解决这个问题，有个缺点，port是不固定的，每次启动server都要配置一次nginx，烦人，只能等以后官方解决了

1
2
brew install nginx
brew uninstall nginx
nginx配置

vi /usr/local/etc/nginx/nginx.conf
添加如下的配置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
location / {
    proxy_pass   http://127.0.0.1:57313;        # 注意这里的端口要跟run起来后的端口一致
    proxy_redirect default;
    proxy_set_header Host $host;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;         
    access_log logs/access.log main;
}

location /api {     #这里等于匹配api的链接，代理到下面这个地址过去                       
    proxy_pass http://t.weather.sojson.com;        # 后台api接口地址
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;         
    access_log logs/access.log main;
}

重启nginx

1
2
3
4
5
6
7
8
9
两种命令，看安装的时候支持哪一种

brew services stop nginx
brew services restart nginx
brew services start nginx

nginx -s stop
nginx
nginx -s reload

flutter里面api写成

1
Response response = await dio.get("http://localhost:9090/api/weather/city/101280101");

这一次要访问nginx的端口

http://localhost:9090

可以看到请求成功

等于页面挂在9090端口，接口也在接9090端口，然后通过代理访问其他网站的api，这样就可以解决CORS跨域问题

参考文章：

官网
https://flutter.dev/docs/get-started/web

https://itnext.io/flutter-for-web-c75011a41956

flutter for web debug
https://www.didierboelens.com/2019/05/flutter-for-the-web/

一些讨论
https://gitter.im/flutter/flutter_web?at=5d7a4bac21fddd21d31dc7d0