Vue.js 3 - "Failed to load module script: The server responded with a non-JavaScript MIME type of "text/html”

Question

我正在用 Vue 3 构建一个网站，所有路由都存储在 routes.json 中。（我这样做是为了让我有一个地方来更新所有会随时间变化的数据。）但是当我尝试 eval() 我的 views 的延迟加载函数时，我收到错误消息“加载模块脚本失败：服务器以非 JavaScript MIME 类型“text/html”响应。在控制台中。下面是 router/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

下面是routes.json:

{
  "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')"
    }
  ]
}

我以前从未见过有人这样做过，所以如果您知道解决方案，请在下面留下它:)

设置：我有 Vue 3、Babel、具有历史模式的路由器和 SASS，没有别的。

Answer 1

这可能是因为您的服务器不支持历史记录模式。历史模式依赖服务器重写将路由传递给 index.html 文件。

您将需要提供有关您的设置和 Apache 或 nginx 配置的更多信息。这是文档中的示例设置：example-server-configurations

或者，您可以使用 hashbang 模式，将 createWebHistory 替换为 createWebHashHistory。该方法依赖于路由中的#字符，它将处理通过index.html页面的所有路由而无需服务器重写。

Answer 2

我（提问者）想通了！为此，我们需要将 "component" 设置为 null。然后，在 index 中，我们不评估每个字符串导入，而是将每个组件设置为具有名称的导入。

Vue.js 3 - "Failed to load module script: The server responded with a non-JavaScript MIME type of "text/html”

Vue.js 3 - "Failed to load module script: The server responded with a non-JavaScript MIME type of "text/html"

javascript

json

vue.js

vuejs3