今天小编跟大家讲解下有关如何迁移Flutter项目到Flutter Web？ ，相信小伙伴们对这个话题应该有所关注吧，小编也收集到了有关如何迁移Flutter项目到Flutter Web？ 的相关资料，希望小伙伴们看了有所帮助。
这篇简单介绍下怎么将一个现有的Flutter项目转成Flutter Web项目。
开始之前先浇一盆冷水，我们理想中的一套代码、多端运行的愿望是要破灭了，至少目前版本的Flutter Web SDK是没法做到的。不过没关系，谷歌爸爸已经在官网中降低了我们的预期：
项目目前只是处于technical preview状态项目是从Flutter主项目fork出来的，目前还没准备好合入主项目不是所有的Flutter API都有对应的Flutter Web实现目前Flutter Web的代码跑起来很卡，性能优化工作才刚刚开始因此Flutter Web目前只是个半成品，踩到坑是必然的，但不妨碍我们试着玩一玩。正好手里有一个之前开发的Flutter项目，看看转成Flutter Web要做哪些事。
首先假定读者之前已经搭好了Flutter开发环境，如果没有的话可以先看看谷歌的文档。再此基础上我们先搭个Flutter Web的环境。
Flutter Web要求Flutter SDK的版本至少要1.5.4，先跑下flutter upgrade升级下Flutter的版本。
然后安装Flutter Web的编译工具webdev：
flutter pub global activate webdev复制代码具体步骤和问题可以参考官网，这里就不多说了。
然后我们开始迁移项目。
由于目前Flutter Web和Flutter是两个不同的SDK，两者在项目中只能二选一，所以要支持Flutter Web就不能用Flutter SDK。因此对于Flutter Web项目，目前只能新开一个项目，把原有项目中大部分搬过去。VS Code也提供了搭建新项目的脚手架：
先用这个方法创建一个新项目。可以看到pubspec.yaml中已经不再依赖flutter了，改为依赖flutter_web:
name: hello_world_webdescription: An app built using Flutter for webenvironment: # You must be using Flutter >=1.5.0 or Dart >=2.3.0 sdk: '>=2.3.0 <3.0.0'dependencies: flutter_web: any flutter_web_ui: anydev_dependencies: build_runner: ^1.5.0 build_web_compilers: ^2.1.0 pedantic: ^1.7.0dependency_overrides: flutter_web: git: url: https://github.com/flutter/flutter_web path: packages/flutter_web flutter_web_ui: git: url: https://github.com/flutter/flutter_web path: packages/flutter_web_ui复制代码然后把老项目中lib文件夹下的所有代码搬过去。这样以后肯定会有一堆编译问题，我们一个个来处理。
首先我们要把import方式全部改掉，比如以前的flutter要换成flutter_web：
import 'package:flutter/material.dart'; /// 不再适用import 'package:flutter_web/material.dart'; /// 现在用这种import 'dart:ui'; /// 不再适用import 'package:flutter_web_ui/ui.dart'; /// 现在用这种复制代码另外由于项目名也变了，比如之前是hello_world，现在是hello_world_web，所有相关的import也要改下。
这么做以后，如果你的项目没有任何第三方依赖的话，编译问题基本算是解决了。如果有第三方依赖，嘿嘿，这就比较麻烦了。我们的项目就用到了如下依赖：
percent_indicator: ^2.1.1 pull_to_refresh: ^1.5.1 fluttertoast: ^3.1.0 flutter_spinkit:"^3.1.0"modal_progress_hud: ^0.1.3 sticky_headers:"^0.1.8"复制代码直接把这些依赖添加到Flutter Web项目中会报错：
Resolving dependencies...Because percent_indicator >=1.0.6 depends on flutter any from sdk which is forbidden, percent_indicator >=1.0.6 is forbidden.So, because iwords_web depends on percent_indicator ^2.1.1, version solving failed. 复制代码也就是说，这些依赖库都是基于Flutter开发的，在Flutter Web项目中不能用。。。 于是去pub.dev上找有没有对应的Web版本依赖，结果发现一个都没有。。。
为了能最终看到跑起来的效果，再恶心的事情也得干。遂决定把所有的依赖库全部源码引入工程中，然后把依赖库逐个改成支持Flutter Web的版本，这是个纯体力活，此处省略1000字。。。
这一步做完，编译问题应该没有了。接下来要处理资源问题了。
以前是通过在pubspec.yaml中指定assets路径的方式，现在同样的方法试了试不起作用。然后官网查了一圈也没说资源怎么指定，最后在Flutter Web官方的Sample代码中找到了方案：
于是把原项目中的assets文件夹搬到新项目的web文件夹下，然后引用资源的路径也调整了下：
/// 老路径FadeInImage.assetNetwork(placeholder:'assets/images/book_placeholder.png',image: item.book.coverImageUrl,fit: BoxFit.cover)/// 新路径FadeInImage.assetNetwork(placeholder:'images/book_placeholder.png',image: item.book.coverImageUrl,fit: BoxFit.cover)复制代码这样图片资源就能显示出来了。
然后我们跑一把项目：
flutter pub get # 获取第三方依赖webdev serve # 把编译好的js部署到web server复制代码如果webdev serve这一步出错的话，可以重启下机器试试。
然后默认是通过localhost:8080打开页面。如果需要指定不同端口号，可以用下面命令：
webdev serve web:3002复制代码打开页面后，发现所有的网络请求都失败，查了下是跨域问题，接口都是跨域访问的。最终确认是服务端需要做如下调整：
接口需要支持OPTIONS modeOPTIONS mode的接口reponse header需要支持跨域在服务端改接口之前，可以用Charles的rewrite功能来mock下，让所有接口都支持跨域：
好了，到这里，迁移过程基本完成。
还留了一些坑，等Flutter Web稳定了以后再看看：
有些文字的布局出现了问题有些图片显示有问题比较卡顿，特别是窗口缩放的时候，感觉是页面渲染卡主线程了，导致浏览器拖放卡顿最后简单梳理下迁移需要做的事情：
Flutter Webimport完。
原文：http://www.cocoachina.com/articles/29430
来源：爱蒂网
