Vue3+VueRouter@4部署Apache服务器路由刷新空白问题求助

在Apache服务器部署基于Vue3和VueRouter@4的项目后，配置.htaccess后大部分路由（如https://example.com/note、https://example.com/login）可正常访问，但带参数的路由（如https://example.com/note/any）仅能从首页跳转访问，刷新或直接输入URL访问时页面空白。本地环境无此问题，仅生产环境出现。

相关配置 #

路由配置（router/index.js） #

{
    path: "/note/:anytext([A-Za-z0-9]{1,10})",
    name: "notes",
    component: Notes,
},

当前.htaccess配置 #

<IfModule mod_rewrite.c>
   RewriteEngine On
   RewriteBase /
   RewriteRule ^index\.html$ - [L]
   RewriteCond %{REQUEST_FILENAME} !-f
   RewriteCond %{REQUEST_FILENAME} !-d
   RewriteRule . /index.html [L]
</IfModule>

控制台报错信息 #

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

解决方案 #

问题出在Vite的base配置上，将原本设置的'./'改为'/'后，带参数的路由刷新/直接访问恢复正常。

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