Vue中难以发现的拼写错误：Errors while compiling. Reload prevented.

2023-11-09 23:19:50

Vue中“Errors while compiling. Reload prevented.”错误的隐秘元凶：拼写错误

作为一名 Vue.js 开发人员，你可能经常遇到一个令人沮丧的错误消息："Errors while compiling. Reload prevented."。这个错误提示乍看之下似乎很笼统，难以确定具体原因。然而，在许多情况下，罪魁祸首实际上是一个简单的拼写错误，尤其是在路由嵌套的场景中。

拼写错误的根源

在路由嵌套中，组件通常使用嵌套结构进行组织。例如：

// App.vue
<template>
  <RouterView />
</template>

<script>
import { createRouter, createWebHistory } from 'vue-router'

const router = createRouter({
  history: createWebHistory(),
  routes: [
    {
      path: '/home',
      component: () => import('./views/Home.vue')
    },
    {
      path: '/about',
      component: () => import('./views/About.vue')
    }
  ]
})

export default router
</script>

// Home.vue
<template>
  <h1>Home</h1>
  <router-view />
</template>

<script>
import { createRouter, createWebHistory } from 'vue-router'

const router = createRouter({
  history: createWebHistory(),
  routes: [
    {
      path: '/profile',
      component: () => import('./views/Profile.vue')
    }
  ]
})

export default router
</script>

如果在 Home.vue 中的嵌套路由定义中不小心拼写错误（例如，将 Profile.vue 写成 Profie.vue），就会导致 "Errors while compiling. Reload prevented." 错误。编译器无法找到名为 Profie.vue 的文件，因此阻止重新加载。

识别和修复拼写错误

要识别这种类型的拼写错误，请仔细检查所有路由定义，尤其是嵌套路由。留意任何拼写不正确的组件名称或文件路径。

修复拼写错误的方法很简单：