如何在 fermyon spin 上提供的 flutter web 应用程序上启用 url 导航

Question

重现步骤

1. 安装flutter和fermyon spin
2. 创建一个 flutter 应用程序（fermyon_routing_issue），配置如下

• main.dart

import 'package:flutter/material.dart';
import 'package:go_router/go_router.dart';
import 'package:flutter_web_plugins/url_strategy.dart';

final _router = GoRouter(
  routes: [
    GoRoute(
      path: '/',
      builder: (context, state) => const HomeScreen(),
      routes: [
        GoRoute(
          path: 'details',
          builder: (context, state) => const DetailsScreen(),
        ),
      ],
    ),
  ],
);

abstract class NamedScreen extends StatelessWidget {
  final String name;
  const NamedScreen({super.key, required this.name});

  @override
  Widget build(context) => Scaffold(body: Center(child: Text(name)));
}

final class HomeScreen extends NamedScreen {
  const HomeScreen({super.key, super.name = 'home'});
}

final class DetailsScreen extends NamedScreen {
  const DetailsScreen({super.key, super.name = 'details'});
}

void main() {
  usePathUrlStrategy();
  runApp(MaterialApp.router(routerConfig: _router));
}

• pubspec.yaml

name: fermyon_routing_issue
description: "A new Flutter project."

version: 1.0.0+1

environment:
  sdk: '>=3.3.3 <4.0.0'

dependencies:
  flutter:
    sdk: flutter
  flutter_web_plugins:
    sdk: flutter
  go_router: ^13.2.3

dev_dependencies:
  flutter_test:
    sdk: flutter
  flutter_lints: ^3.0.0

flutter:
  uses-material-design: true

3. 运行应用程序

   flutter run -d chrome

   • 当应用程序运行时附加到网址

     /details

   • 观察应用程序显示

     DetailsScreen

4. 将

   spin.toml

   添加到应用程序文件夹中，内容如下

spin_manifest_version = 2

[application]
name = "server"
version = "0.1.0"
authors = ["you <[email protected]>"]
description = "static server for flutter web app"

[[trigger.http]]
route = "/..."
component = "server"

[component.server]
source = { url = "https://github.com/fermyon/spin-fileserver/releases/download/v0.2.1/spin_static_fs.wasm", digest = "sha256:5f05b15f0f7cd353d390bc5ebffec7fe25c6a6d7a05b9366c86dcb1a346e9f0f" }
files = [{ source = "build/web", destination = "/" }]

5. 运行

   spin up

   并打开提供的 url
   • 当应用程序运行时附加到网址

     /details

   • 观察应用程序显示

     Not Found

要让所提供的静态 Web 应用程序按预期运行，正确的配置是什么？

Answer 1

fermyon spin

修复问题

spin.toml