VueJsで2階層目のURLを直叩きすると「Failed to load module script:」が発生してしまう

Question

前提・実現したいこと

VueJs、VueRouterを使用してFirebaseのHostingにデプロイする形でウェブサービスを開発していますが
2階層目のURLを直叩きすると「Failed to load module script:」が発生してしまいます
（開発環境では問題有りませんでしたが、Firebase上で行うとこのようになりました）

具体的には
https://test.web.app/about
F5更新しても問題なく表示される

https://test.web.app/about/rule
F5更新すると画面が真っ白で下記エラーメッセージが表示される
<router-link aria-current="page" to="/about/rule">で遷移する場合は問題なく表示されます

発生している問題・エラーメッセージ

Failed to load module script: The server responded with a non-JavaScript MIME type of "text/html". Strict MIME type checking is enforced for module scripts per HTML spec.

router.jsのソースです

import { createRouter, createWebHistory } from "vue-router";
export default createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes: [
    { path: "/", name: "Index", component: Index },
    { path: "/about", HowtoUse: "HowtoUse", component: HowtoUse },
    { path: "/about/rule", Rule: "Rule", component: Rule },
  ],
});

試したこと

<script type="module"を<script type="text/html"に変えると解決するという記事を見つけて試しましたが、なにも表示されない状態になってしまいました ### 補足情報（FW/ツールのバージョンなど） "vue": "^3.0.11", "vue-router": "^4.0.4" ここにより詳細な情報を記載してください。

Answer 1

2階層以降のネストされたパスなら、親子関係を持たせてルーティングさせるのがよいはずです。
https://v3.router.vuejs.org/ja/guide/essentials/nested-routes.html