Flutter Web应用VS Code运行时非英文字符（日文）不显示及终端运行热重载异常问题求助

我之前开发Flutter Web时也碰到过几乎一模一样的问题，折腾了好一会儿才找到几个有效的解决办法，分享给你：

1. 调整VS Code调试配置，解决日文显示问题 #

VS Code默认的Flutter Web调试配置可能用了不合适的渲染器，导致部分字体加载异常。你可以修改.vscode/launch.json文件：

• 打开命令面板（Shift+Command+P），输入Debug: Open launch.json
• 在配置里添加args参数指定web渲染器，比如用html渲染器（对字体兼容性更好）：

  {
    "version": "0.2.0",
    "configurations": [
      {
        "name": "Flutter Web",
        "request": "launch",
        "type": "dart",
        "args": ["--web-renderer", "html"]
      }
    ]
  }
  

• 保存后重启调试会话（Shift+F5再F5），日文文本应该就能正常显示了。如果还是不行，可以试试换成canvaskit渲染器，部分场景下它的字体渲染更稳定。

2. 让终端运行也支持自动热重载（或回归VS Code调试的自动重载） #

你说终端运行时必须手动按r触发热重载，其实是可以优化的：

• 首先，flutter run默认就是热重载模式，可能是你的终端输入焦点没在窗口上，或者文件保存时没有触发监听。试试启动后确保终端窗口处于激活状态，修改文件保存后看看会不会自动重载。
• 更推荐的是直接修复VS Code的调试配置，这样既能用VS Code的自动热重载（保存文件就触发），又能解决字体问题。在刚才的launch.json里加上deviceId指定Chrome，完整配置如下：

  {
    "version": "0.2.0",
    "configurations": [
      {
        "name": "Flutter Web (Chrome)",
        "request": "launch",
        "type": "dart",
        "deviceId": "chrome",
        "args": ["--web-renderer", "html"]
      }
    ]
  }
  

  这样用F5启动后，VS Code会直接调用Chrome运行，字体显示正常，同时保存代码时自动触发热重载，完美替代终端运行的方式。

3. 兜底方案：手动引入支持日文的字体 #

如果上面的方法都不行，可能是Flutter Web默认没包含日文字体，你可以手动引入：

• 下载支持日文的字体（比如Noto Sans JP），放在项目的fonts目录下
• 在pubspec.yaml里配置字体：

  flutter:
    fonts:
      - family: NotoSansJP
        fonts:
          - asset: fonts/NotoSansJP-Regular.otf
  

• 在需要显示日文的Text组件里指定字体：

  Text(
    "こんにちは",
    style: TextStyle(fontFamily: 'NotoSansJP'),
  )
  

  这种方法不管是VS Code还是终端运行，都能保证字体正确加载。

我当时是用第一个方法解决的字体问题，第二个方法恢复了自动热重载，你可以先试试前两个，应该能解决你的问题。

内容的提问来源于stack exchange，提问作者hmmh