.htaccess 使用htaccess RewriteEngine时,抖动Web出错

6za6bjd0  于 2023-03-03  发布在  其他
关注(0)|答案(1)|浏览(105)

我写了一个简单的代码来建立一个网站使用flutter。我用go_router的网址策略,我想访问我的本地文件(如php文件)太。所以我用.htaccess重定向到我的应用程序和本地文件,但当我启用RewrtieEngine的应用程序不工作。(波纹管错误)

Uncaught SyntaxError: expected expression, got '<'                                                                             flutter.js:1
The script from “http://localhost/color/flutter.js” was loaded even though its MIME type (“text/html”) is not a valid JavaScript MIME type.

下面是我的代码:

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

void main() async {
  final router = GoRouter(
    urlPathStrategy: UrlPathStrategy.path,
    initialLocation: '/white',
    routes: [
      GoRoute(path: '/', redirect: (state) => state.namedLocation('White')),
      GoRoute(path: '/white', name: 'White', pageBuilder: (context, state) => MaterialPage(key: state.pageKey, child: const ColorPage(title: 'White Page', color: Colors.white))),
      GoRoute(path: '/red', name: 'Red', pageBuilder: (context, state) => MaterialPage(key: state.pageKey, child: const ColorPage(title: 'Red Page', color: Colors.red))),
      GoRoute(path: '/blue', name: 'Blue', pageBuilder: (context, state) => MaterialPage(key: state.pageKey, child: const ColorPage(title: 'Blue Page', color: Colors.blue))),
      GoRoute(path: '/green', name: 'Green', pageBuilder: (context, state) => MaterialPage(key: state.pageKey, child: const ColorPage(title: 'Green Page', color: Colors.green))),
      GoRoute(path: '/yellow', name: 'Yellow', pageBuilder: (context, state) => MaterialPage(key: state.pageKey, child: const ColorPage(title: 'Yellow Page', color: Colors.yellow))),
    ],
    errorPageBuilder: (context, state) => MaterialPage(
      key: state.pageKey,
      child: Scaffold(
        body: Center(
          child: Text(state.error.toString()),
        ),
      ),
    ),
  );

  runApp(
    MaterialApp.router(
      title: 'Colors',
      theme: ThemeData(primaryColor: Colors.black),
      debugShowCheckedModeBanner: false,
      routeInformationProvider: router.routeInformationProvider,
      routeInformationParser: router.routeInformationParser,
      routerDelegate: router.routerDelegate,
    ),
  );
}

class ColorPage extends StatefulWidget {
  const ColorPage({Key? key, required this.title, required this.color}) : super(key: key);

  final String title;
  final Color color;

  @override
  State<ColorPage> createState() => _ColorPageState();
}

class _ColorPageState extends State<ColorPage> {
  void colorChange(String color) => context.goNamed(color);

  @override
  Widget build(BuildContext context) {
    return Title(
      color: Colors.black,
      title: widget.title,
      child: Scaffold(
        appBar: AppBar(
          centerTitle: true,
          title: Text(widget.title, style: const TextStyle(color: Colors.black),),
          backgroundColor: widget.color,
        ),
        body: Center(
          child: Column(
            children: <Widget>[
              SizedBox(
                height: 500,
                child: Center(
                  child: Text("This is a color page.", style: TextStyle(color: widget.color)),
                ),
              ),
              Row(
                mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                children: <Widget>[
                  FloatingActionButton(
                    heroTag: 'White',
                    backgroundColor: widget.color,
                    onPressed: () => colorChange('white'),
                    tooltip: 'Change Color',
                    child: const Icon(Icons.circle_rounded, color: Colors.white),
                  ),
                  FloatingActionButton(
                    heroTag: 'red',
                    backgroundColor: widget.color,
                    onPressed: () => colorChange('red'),
                    tooltip: 'Change Color',
                    child: const Icon(Icons.circle_rounded, color: Colors.red),
                  ),
                  FloatingActionButton(
                    heroTag: 'blue',
                    backgroundColor: widget.color,
                    onPressed: () => colorChange('blue'),
                    tooltip: 'Change Color',
                    child: const Icon(Icons.circle_rounded, color: Colors.blue),
                  ),
                  FloatingActionButton(
                    heroTag: 'green',
                    backgroundColor: widget.color,
                    onPressed: () => colorChange('green'),
                    tooltip: 'Change Color',
                    child: const Icon(Icons.circle_rounded, color: Colors.green),
                  ),
                  FloatingActionButton(
                    heroTag: 'yellow',
                    backgroundColor: widget.color,
                    onPressed: () => colorChange('yellow'),
                    tooltip: 'Change Color',
                    child: const Icon(Icons.circle_rounded, color: Colors.yellow),
                  ),
                ],
              )
            ],
          ),
        ),
      ),
    );
  }
}

要重现错误,只需在文件夹中放入.htaccess并重新加载页面

#.htaccess

RewriteEngine on
RewriteRule file$ sample.php [QSA,L]
RewriteRule . index.html [QSD,L]
jw5wzhpr

jw5wzhpr1#

这是因为您的所有脚本都重定向到index.html。看起来您的基本路径不是'/',而是'/color/'
在这种情况下,您需要允许Flutter service worker和assets,然后将所有路径重定向到index.html:

RewriteCond %{REQUEST_URI} !^/color/flutter_service_worker.js [NC]
RewriteCond %{REQUEST_URI} !^/color/assets/ [NC]
RewriteRule ^color/.*$ color/index.html [L]

然后你可以设置访问本地php文件

相关问题