ElementPlus布局出现“xx/index.vue“. Does the file exist?

复制页面，加入后出现index.vue". Does the file exist?

问题：

[plugin:vite:import-analysis] Failed to resolve import "element-plus/es/components/head/style/css" from "src\views\MyFrontTest\Test1\index.vue". Does the file exist?
E:/song/myfrontend/yudao-ui-admin-vue3/src/views/MyFrontTest/Test1/index.vue:4:128
2  |  import { ElFooter as __unplugin_components_2 } from 'element-plus/es';import 'element-plus/es/components/base/style/css';import 'element-plus/es/components/footer/style/css';
3  |  import { ElMain as __unplugin_components_1 } from 'element-plus/es';import 'element-plus/es/components/base/style/css';import 'element-plus/es/components/main/style/css';
4  |  import { ElHead as __unplugin_components_0 } from 'element-plus/es';import 'element-plus/es/components/base/style/css';import 'element-plus/es/components/head/style/css';
   |                                                                                                                                 ^
5  |  import { defineComponent as _defineComponent } from "vue";
6  |  const o = "test";
    at formatError (file:///E:/song/myfrontend/yudao-ui-admin-vue3/node_modules/.pnpm/vite@4.4.9_@types+node@20.4.0_sass@1.65.1_terser@5.19.2/node_modules/vite/dist/node/chunks/dep-df561101.js:43993:46)
    at TransformContext.error (file:///E:/song/myfrontend/yudao-ui-admin-vue3/node_modules/.pnpm/vite@4.4.9_@types+node@20.4.0_sass@1.65.1_terser@5.19.2/node_modules/vite/dist/node/chunks/dep-df561101.js:43989:19)
    at normalizeUrl (file:///E:/song/myfrontend/yudao-ui-admin-vue3/node_modules/.pnpm/vite@4.4.9_@types+node@20.4.0_sass@1.65.1_terser@5.19.2/node_modules/vite/dist/node/chunks/dep-df561101.js:41801:33)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
    at async file:///E:/song/myfrontend/yudao-ui-admin-vue3/node_modules/.pnpm/vite@4.4.9_@types+node@20.4.0_sass@1.65.1_terser@5.19.2/node_modules/vite/dist/node/chunks/dep-df561101.js:41945:47
    at async Promise.all (index 11)
    at async TransformContext.transform (file:///E:/song/myfrontend/yudao-ui-admin-vue3/node_modules/.pnpm/vite@4.4.9_@types+node@20.4.0_sass@1.65.1_terser@5.19.2/node_modules/vite/dist/node/chunks/dep-df561101.js:41870:13)
    at async Object.transform (file:///E:/song/myfrontend/yudao-ui-admin-vue3/node_modules/.pnpm/vite@4.4.9_@types+node@20.4.0_sass@1.65.1_terser@5.19.2/node_modules/vite/dist/node/chunks/dep-df561101.js:44283:30)
    at async loadAndTransform (file:///E:/song/myfrontend/yudao-ui-admin-vue3/node_modules/.pnpm/vite@4.4.9_@types+node@20.4.0_sass@1.65.1_terser@5.19.2/node_modules/vite/dist/node/chunks/dep-df561101.js:54950:29)
    at async viteTransformMiddleware (file:///E:/song/myfrontend/yudao-ui-admin-vue3/node_modules/.pnpm/vite@4.4.9_@types+node@20.4.0_sass@1.65.1_terser@5.19.2/node_modules/vite/dist/node/chunks/dep-df561101.js:64345:32
Click outside, press Esc key, or fix the code to dismiss.
You can also disable this overlay by setting server.hmr.overlay to false in vite.config.js.

最后找到问题，是我粗心写错了一个 ，不是。导致一直报错。

知识记录

在 Element Plus 中，<el-header> 是用于布局的容器组件，通常用于页面的顶部区域，用来放置标题、导航栏等内容。而 <el-head> 并不是 Element Plus 官方提供的组件，可能是自定义的组件名称或者错误的组件名称。

如果您使用的是 Element Plus，建议使用官方提供的组件名称 <el-header>。

官网

Container 布局容器#

用于布局的容器组件，方便快速搭建页面的基本结构：

<el-container>：外层容器。 当子元素中包含 <el-header> 或 <el-footer> 时，全部子元素会垂直上下排列， 否则会水平左右排列。

<el-header>：顶栏容器。

<el-aside>：侧边栏容器。

<el-main>：主要区域容器。

<el-footer>：底栏容器。

TIP

以上组件采用了 flex 布局，使用前请确定目标浏览器是否兼容。 此外， <el-container>的直接子元素必须是后四个组件中的一个或多个。 后四个组件的亲元素必须是一个 <el-container>