Vue.js 3-“；未能加载模块脚本：服务器响应的非JavaScript MIME类型为；text/html"；

我正在VUE3中构建一个网站，所有路由都存储在

routes.json

中。（我这样做是因为我有一个地方可以更新随时间变化的所有数据。）但是当我尝试

eval（）

我的

视图的延迟加载函数时，我在控制台中得到错误“加载模块脚本失败：服务器以非JavaScript MIME类型“text/html”响应”。下面是
路由器/index.js
：

import { createRouter, createWebHistory } from 'vue-router'
import routes from '../../data/routes.json'

let evalRoutes = []
for (let i = 0; i < routes.routes.length; i++)
  evalRoutes[i] = routes.routes[i]

for (let i = 0; i < evalRoutes.length; i++)
  evalRoutes[i].component = eval(evalRoutes[i].component)
console.log(evalRoutes)

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes: evalRoutes,
})

export default router


我以前从未见过有人这样做，因此如果您知道解决方案，请将其记在下面：）

设置：
我有Vue 3、Babel、带历史模式的路由器和SASS，没有其他功能。
这可能是因为您的服务器不支持历史模式。历史记录模式依赖服务器重写将路由传递到index.html文件

您需要提供有关设置和Apache或nginx配置的更多信息。以下是文档中的示例设置：

或者，您可以使用hashbang模式，将
createWebHistory
替换为
createWebHashHistory
。此方法依赖于路由中的
#
字符，该字符将在不重写服务器的情况下处理index.html页面中的所有路由。
I（提问者）已经解决了这个问题！要执行这些操作，我们需要将
“component”
设置为null。然后，在
索引中
，我们将每个组件设置为带有名称的导入，而不是评估每个字符串导入。
我的服务器实际上支持历史模式…我将更新我的问题whoopsRip，我只能接受我的答案
{
  "routes": [
    {
      "path": "/",
      "name": "Home",
      "component": "() => import('../views/Home')"
    },
    {
      "path": "/about",
      "name": "About",
      "component": "() => import('../views/About')"
    },
    {
      "path": "/contact",
      "name": "Contact",
      "component": "() => import('../views/Contact')"
    },
    {
      "path": "/policy",
      "name": "Policy",
      "component": "() => import('../views/Policy')"
    }
  ]
}