Nuxt3 rc.11 填坑 配置 element-plus

网上各种版本都有，就是都不太行，不太完整。

先看下package.json

{   "private": true,   "scripts": {     "build": "nuxt build",     "dev": "nuxt dev",     "generate": "nuxt generate",     "preview": "nuxt preview",     "postinstall": "nuxt prepare"   },   "devDependencies": {     "nuxt": "3.0.0-rc.11",     "sass": "^1.49.8",     "sass-loader": "^12.6.0",     "unplugin-auto-import": "^0.10.3",     "unplugin-icons": "^0.13.2",     "unplugin-vue-components": "^0.22.8"   },   "dependencies": {     "element-plus": "^2.2.17"   } } 

tsconfig.json

{   // https://v3.nuxtjs.org/concepts/typescript   "extends": "./.nuxt/tsconfig.json",   "compilerOptions": {     // ...     "types": ["element-plus/global"]   } } 

nuxt.config.ts

import AutoImport from 'unplugin-auto-import/vite' import Components from "unplugin-vue-components/vite"; import { ElementPlusResolver } from 'unplugin-vue-components/resolvers' import IconsResolver from "unplugin-icons/resolver"; const lifecycle = process.env.npm_lifecycle_event; export default defineNuxtConfig({     vite: {         plugins: [             AutoImport({                 resolvers: [                     ElementPlusResolver(                     ),                     IconsResolver()]             }),             Components({                 dts: true,                 resolvers: [ElementPlusResolver(                     {                         importStyle: false                     }                 )]             }),         ],     },     components: true,     css: ["~/assets/scss/index.scss"],     transpile: ["element-plus"],     build: {         transpile: lifecycle === "build" ? ["element-plus"] : [],     }, }) 

按照上面的配置在代码中就可以直接引用组件了，例如index.vue中的按钮

<template>   <div>     <h1>Welcome to the homepage</h1>     <AppAlert> This is an auto-imported component </AppAlert>     <el-button>I am ElButton</el-button>      <div>       <el-radio-group v-model="radio1" size="large">         <el-radio-button label="New York" />         <el-radio-button label="Washington" />         <el-radio-button label="Los Angeles" />         <el-radio-button label="Chicago" />       </el-radio-group>     </div>   </div> </template>  <script lang="ts" setup> import { ref } from "vue"; const radio1 = ref('New York') </script> <style lang='scss' scoped> </style>

这时候可能会报错如下

ElementPlusError: [IdInjection] Looks like you are using server rendering, you must provide a id provider to ensure the hydration process to be succeed usage: app.provide(ID_INJECTION_KEY, {   prefix: number,   current: number, })     at debugWarn (file:///E:/h5/vuestudy/vue3Study/nuxt-app/node_modules/element-plus/es/utils/error.mjs:15:37)     at useId (file:///E:/h5/vuestudy/vue3Study/nuxt-app/node_modules/element-plus/es/hooks/use-id/index.mjs:16:5)     at setup (file:///E:/h5/vuestudy/vue3Study/nuxt-app/node_modules/element-plus/es/components/radio/src/radio-group2.mjs:26:21)     at callWithErrorHandling (E:\h5\vuestudy\vue3Study\nuxt-app\node_modules\@vue\runtime-core\dist\runtime-core.cjs.js:157:22)     at setupStatefulComponent (E:\h5\vuestudy\vue3Study\nuxt-app\node_modules\@vue\runtime-core\dist\runtime-core.cjs.js:7118:29)     at setupComponent (E:\h5\vuestudy\vue3Study\nuxt-app\node_modules\@vue\runtime-core\dist\runtime-core.cjs.js:7073:11)     at renderComponentVNode (E:\h5\vuestudy\vue3Study\nuxt-app\node_modules\@vue\server-renderer\dist\server-renderer.cjs.js:172:17)     at Module.ssrRenderComponent (E:\h5\vuestudy\vue3Study\nuxt-app\node_modules\@vue\server-renderer\dist\server-renderer.cjs.js:612:12)     at _sfc_ssrRender (E:/h5/vuestudy/vue3Study/nuxt-app/pages/index.vue:58:31)     a

这是因为 在SSR下elementui需要配置一个provide

需要在 plugins文件夹下建立一个element-plus.ts

import { ID_INJECTION_KEY } from 'element-plus';  export default defineNuxtPlugin(nuxtApp => {     // Doing something with nuxtApp     nuxtApp.vueApp.provide(ID_INJECTION_KEY,{         prefix: Math.floor(Math.random() * 10000),         current: 0,     })   })

然后再进行重启服务 npm run dev，就可以运行正常了，控制台也不会有警告和错误了