plugin:vite:import-analysis 无法解析从“src\router\index.js”导入“../components/x.vue”。文件是否存在？ [关闭]

Question

在我的 Vue JS 应用程序中，src/routes 中有以下 js

index.js

import { createRouter, createWebHistory } from "vue-router";
import Dashboard from '../views/Dashboard.vue';
import Customers from '../views/Customers.vue';
import Login from '../views/Login.vue';
import Register from '../views/Register.vue';
import DefaultLayout from '../components/DefaultLayout.vue';
import AuthLayout from '../components/AuthtLayout.vue';
import store from "../store";

const routes = [
        {
        path : '/',
        redirect : '/dashboard',
        component : DefaultLayout,
        meta : { requiresAuth : true },
        children : [
            {path : '/dashboard', name : 'Dashboard', component : Dashboard},
            {path : '/customers', name : 'Customers', component : Customers}
        ]
    },

    {
        path : '/auth',
        redirect : '/login',
        name : 'Auth',
        component : AuthLayout,
        children:[

                {
                    path : '/login',
                    name : 'Login',
                    component : Login,
                },

                {
                    path : '/register',
                    name : 'Register',
                    component : Register,
                },
            
        ],
    },

    
];

const router = createRouter({
    history : createWebHistory(),
    routes
})

router.beforeEach((to, from, next) => {
    if(to.meta.requiresAuth && !store.state.user.token){
        next({name : 'Login'})
    } else if (store.state.user.token && ( to.name === 'Login' || to.name === 'Register' )  ) {
        next({ name : 'Dashboard' });
    } else{
        next ()
    }
})

export default router;

我在 src/views 中有以下 Login.vue。

<template> 
      <div>
        <img class="mx-auto h-12 w-auto" src="https://tailwindui.com/img/logos/workflow-mark-indigo-600.svg" alt="Workflow" />
        <h2 class="mt-6 text-center text-3xl font-extrabold text-gray-900">
          Sign in to your account
        </h2>
        <p class="mt-2 text-center text-sm text-gray-600">
          Or
          {{ ' ' }}
          <a href="#" class="font-medium text-indigo-600 hover:text-indigo-500">
            start your 14-day free trial
          </a>
        </p>
      </div>
      <form class="mt-8 space-y-6" action="#" method="POST">
        <input type="hidden" name="remember" value="true" />
        <div class="rounded-md shadow-sm -space-y-px">
          <div>
            <label for="email-address" class="sr-only">Email address</label>
            <input id="email-address" name="email" type="email" autocomplete="email" required="" class="appearance-none rounded-none relative block w-full px-3 py-2 border border-gray-300 placeholder-gray-500 text-gray-900 rounded-t-md focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 focus:z-10 sm:text-sm" placeholder="Email address" />
          </div>
          <div>
            <label for="password" class="sr-only">Password</label>
            <input id="password" name="password" type="password" autocomplete="current-password" required="" class="appearance-none rounded-none relative block w-full px-3 py-2 border border-gray-300 placeholder-gray-500 text-gray-900 rounded-b-md focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 focus:z-10 sm:text-sm" placeholder="Password" />
          </div>
        </div>

        <div class="flex items-center justify-between">
          <div class="flex items-center">
            <input id="remember-me" name="remember-me" type="checkbox" class="h-4 w-4 text-indigo-600 focus:ring-indigo-500 border-gray-300 rounded" />
            <label for="remember-me" class="ml-2 block text-sm text-gray-900">
              Remember me
            </label>
          </div>

          <div class="text-sm">
            <a href="#" class="font-medium text-indigo-600 hover:text-indigo-500">
              Forgot your password?
            </a>
          </div>
        </div>

        <div>
          <button type="submit" class="group relative w-full flex justify-center py-2 px-4 border border-transparent text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
            <span class="absolute left-0 inset-y-0 flex items-center pl-3">
              <LockClosedIcon class="h-5 w-5 text-indigo-500 group-hover:text-indigo-400" aria-hidden="true" />
            </span>
            Sign in
          </button>
        </div>
      </form>
</template>

<script>
import { LockClosedIcon } from '@heroicons/vue/solid'

export default {
  components: {
    LockClosedIcon,
  },
}
</script>

然后我在 src/components 中有一个名为 AuthLayout.vue 的组件

<template> 
  <div class="min-h-full flex items-center justify-center py-12 px-4 sm:px-6 lg:px-8">
    <div class="max-w-md w-full space-y-8">
      <div>
        <router-view></router-view>
    </div>
  </div>
</template>

<script>
import { LockClosedIcon } from '@heroicons/vue/solid'

export default {
  components: {
    LockClosedIcon,
  },
}
</script>

每次我尝试运行我的应用程序时，它总是给我以下错误。

[plugin:vite:import-analysis] 无法解析从“src\router\index.js”导入“../components/AuthtLayout.vue”。该文件是否存在？

当我从 index.js 应用程序中评论 import AuthLayout from '../components/AuthtLayout.vue'; 时运行良好。但是每次我尝试启用它时，它都会给我一个错误。

我正在使用 Tailwind CSS 和 Vue 3

Answer 1

[plugin:vite:import-analysis] 无法解析从“src\router\index.js”导入“../components/AuthtLayout.vue”。文件存在吗？

AuthtLayout.vue 中有错字（额外的 T）。更改为 AuthLayout.vue 可能会有所帮助