时间戳

首页 > 解决方案 > Vue.js 3 - “加载模块脚本失败：服务器以非 JavaScript MIME 类型“text/html”响应

javascript - Vue.js 3 - “加载模块脚本失败：服务器以非 JavaScript MIME 类型“text/html”响应

问题描述

我正在 Vue 3 中建立一个网站，所有路线都存储在routes.json. （我这样做是为了在一个地方更新所有会随时间变化的数据。）但是当我尝试eval()为我views的 . “text/html”的非 JavaScript MIME 类型。” 在控制台中。下面是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 的路由器，仅此而已。

标签： javascriptjsonvue.jsvuejs3

解决方案

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

推荐阅读