In my Vue JS application, I have the following js inside src/router index.js

import { createRouter, createWebHistory } from 'vue-router'
import { isMobileTerminal } from '../utils/flexible'
import mobileRoutes from './module/mobile-routes'
import pcRoutes from './module/pc-routes'

// 创建 vueRouter实例
const router = createRouter({
  history: createWebHistory(),
  routes: isMobileTerminal.value ? mobileRoutes : pcRoutes
})

export default router

And I have the following mobile-routes.js inside src/router/module

export default [
  {
    path: '/', // 路径
    name: 'home', // 当前路由名字
    component: () => import('../../views/main/index') // 对应的组件
  }
]

Then I have a component called, index.vue inside src/views/main

<template>
  <div>
    移动端首页
  </div>
</template>

<script setup>
export default {
  name: 'index'
}
</script>

<style lang="scss" scoped></style>

Every time I tried to run my application, it kept giving me the following errors: [plugin:vite:import-analysis] Failed to resolve import "../../views/main/index" from "src/router/module/mobile-routes.js". Does the file exist?

ERROR as shown in the figure enter image description here

I'm using tailwind CSS ，vite and Vue 3