跳到主要内容
极客日志极客日志面向AI+效率的开发者社区
首页博客我的书GitHub 精选镜像AI 生图工具UI配色美学关于
搜索内容 / 工具 / 仓库 / 镜像...⌘K搜索
注册
博客列表
Dart大前端java

鸿蒙 HarmonyOS 与 Flutter 3.27.4 混合开发：开发环境配置

鸿蒙 HarmonyOS 与 Flutter 混合开发环境配置指南。涵盖 DevEco Studio、VS Code、JDK 及 Flutter SDK 的下载安装，系统环境变量 Path 及自定义变量的配置方法，以及通过创建 Flutter 项目验证环境并运行至真机的完整流程。重点解决多端复用场景下的基础环境搭建问题，确保 Flutter 与 HarmonyOS 插件正常识别。

人间过客发布于 2026/2/12更新于 2026/8/1756 浏览

概要

需求场景：当前 APP 已有三端需要开发维护：鸿蒙、安卓、苹果，每次新增功能都需要三端同步开发，成本太高。 解决方案：新增功能使用 Flutter 开发，然后作为子模块被依赖到原来的工程中，实现三端复用。

一。开发工具与 SDK 下载安装

1. 工具安装
名称版本下载地址
DevEco Studio6.0.2 Beta1https://developer.huawei.com/consumer/cn/download/
VS Code1.108.1https://code.visualstudio.com/
JDK17.0.12https://download.oracle.com/java/17/archive/jdk-17.0.12_windows-x64_bin.exe

上述工具直接下载安装即可，建议记录 DevEco Studio 和 JDK 的安装路径，以便后续配置环境变量。示例路径如下： D:\Program Files\Huawei\DevEco Studio D:\Program Files\Java

2. Flutter 仓库代码下载

使用 GIT 命令克隆 oh-3.27.4-dev 分支到本地，该路径也是配置环境变量要用的。示例本地路径为： D:\flutter_flutter

git clone -b oh-3.27.4-dev https://gitcode.com/openharmony-tpc/flutter_flutter.git

二。配置环境变量

1. Path 变量配置

总共新增了 5 项，需根据实际路径进行配置： D:\flutter_flutter\bin D:\Program Files\Java\jdk-17\bin D:\Program Files\Huawei\DevEco Studio\tools\ohpm\bin D:\Program Files\Huawei\DevEco Studio\tools\hvigor\bin D:\Program Files\Huawei\DevEco Studio\tools\node

环境配置截图

2. 新建变量

总共新建了 4 个变量，需根据实际路径进行配置：

变量名变量值
DEVECO_SDK_HOMED:\Program Files\Huawei\DevEco Studio\sdk
FLUTTER_STORAGE_BASE_URLhttps://storage.flutter-io.cn
PUB_CACHED:/PUB
PUB_HOSTED_URLhttps://pub.flutter-io.cn

变量设置截图

3. 检查 Flutter 环境

运行命令：flutter doctor -v 在结果中看到 Flutter 和 HarmonyOS 部分没有出现 ❌ 即表示环境配置成功，如果出现 ❌，查看对应的环境变量是否有正确配置。 注意：环境变量修改前，若已打开 cmd，那么在修改后，必须重开 cmd，否则获取不到修改后的环境，进而导致命令执行出错。

检查结果截图

三。创建并运行 Flutter 项目

1. 创建项目

这里创建的 Flutter 项目，主要是为了进一步验证开发环境是否配置成功。 运行命令创建项目：flutter create --platforms ohos flutter_demo

2. VS Code 插件安装

VS Code 需要安装插件：Flutter，安装时会自动安装另一个插件：Dart，因为 Flutter 插件依赖于 Dart 插件。 另外，推荐安装插件：Awesome Flutter Snippets，可以生成 widget 代码。

插件安装截图

3. VS Code 启动项目

用 VS Code 打开项目后，右下角会显示当前连接的设备，点击后可以选择其他设备，此处连接的是真机，如果启动了鸿蒙的模拟器，这里也会显示出来。

设备连接截图

连接设备后，打开项目中的 main.dart，点击 Run 运行。 首次运行将自动下载必要工具包，接着控制台输出错误信息：

报错截图

根据错误提示信息，用 DevEco Studio 打开 flutter_demo 项目下的 ohos 工程，配置好调试签名后，回到 VS Code，再次点击 main.dart 中的 Run 运行项目，运行成功。

运行成功截图

设备端显示对应页面，表明当前开发环境配置成功。

设备显示截图

目录

  1. 概要
  2. 一。开发工具与 SDK 下载安装
  3. 1. 工具安装
  4. 2. Flutter 仓库代码下载
  5. 二。配置环境变量
  6. 1. Path 变量配置
  7. 2. 新建变量
  8. 3. 检查 Flutter 环境
  9. 三。创建并运行 Flutter 项目
  10. 1. 创建项目
  11. 2. VS Code 插件安装
  12. 3. VS Code 启动项目
  • 免费图片AI生成工具免费生成了解详情
  • Magick API 一键接入全球大模型注册送1000万token查看
  • 免费图片视频在线生成30秒，将你的创意变成现实开始设计
  • X/Twitter免费视频下载器免登陆无限额度免费视频解析下载了解详情
  • 100+免费在线小游戏爽一把
极客日志微信公众号二维码

微信扫一扫，关注极客日志

微信公众号「极客日志V2」，在微信中扫描左侧二维码关注。展示文案：极客日志V2 zeeklog

更多推荐文章

查看全部
  • AI 大模型简介与开发环境配置指南
  • FPGA 工程师岗位方向详解：逻辑、算法、底层及系统应用
  • Stable Diffusion v1.5 提示词与负向提示词实战指南
  • Claude Code 持久化记忆插件 claude-mem 完全指南
  • Python 格式化符号及转义字符用法详解
  • 2026 年 3 月 18 日人工智能产业动态：算力、智能体与生态
  • FastAPI：Python 高性能 Web 框架核心特性与性能测试
  • 基于腾讯云轻量应用服务器部署 OpenClaw 并接入 QQ 与飞书机器人
  • RAG 入门：LangChain Embedding 介绍与使用
  • 基于 Unity 2022 与 UXR SDK 的 AR 消消乐游戏开发实践
  • LangChain+LLaMA：AI 原生应用上下文理解的最佳技术组合
  • Python pytest 框架使用指南：自动化测试入门
  • DuckDB C++ 集成：在嵌入式项目中实现高性能数据分析
  • AI 绘画 Prompt 编写结构与进阶技巧详解
  • 利用 Kotlin 扩展函数优雅处理网络异常详解
  • C++ 红黑树封装实战：从零实现 Map 与 Set
  • 滑动窗口算法详解：13 水果成篮
  • iOS 26 系统兼容适配：UITabBar 液态玻璃效果与 WiFi 获取方案
  • 找回 Edge 边栏中消失的 Copilot 图标
  • GitHub Copilot Pro 学生免费认证与 VS Code 集成指南

相关免费在线工具

  • Keycode 信息

    查找任何按下的键的javascript键代码、代码、位置和修饰符。 在线工具，Keycode 信息在线工具，online

  • Escape 与 Native 编解码

    JavaScript 字符串转义/反转义；Java 风格 \uXXXX（Native2Ascii）编码与解码。 在线工具，Escape 与 Native 编解码在线工具，online

  • JavaScript / HTML 格式化

    使用 Prettier 在浏览器内格式化 JavaScript 或 HTML 片段。 在线工具，JavaScript / HTML 格式化在线工具，online

  • JavaScript 压缩与混淆

    Terser 压缩、变量名混淆，或 javascript-obfuscator 高强度混淆（体积会增大）。 在线工具，JavaScript 压缩与混淆在线工具，online

  • Base64 字符串编码/解码

    将字符串编码和解码为其 Base64 格式表示形式即可。 在线工具，Base64 字符串编码/解码在线工具，online

  • Base64 文件转换器

    将字符串、文件或图像转换为其 Base64 表示形式。 在线工具，Base64 文件转换器在线工具，online