build(build): [hmr] Resolution - hmr wss connection failed

play/package.json

@@ -11,10 +11,13 @@
     "vue": "^3.2.37"
   },
   "devDependencies": {
-    "@vitejs/plugin-vue": "^2.3.3",
-    "unplugin-vue-components": "0.21.2",
-    "vite": "^2.9.15",
-    "vite-plugin-inspect": "^0.5.0",
-    "vite-plugin-mkcert": "^1.7.2"
+    "@iconify/json": "^2.2.202",
+    "@vitejs/plugin-vue": "^4.6.2",
+    "unplugin-auto-import": "^0.17.5",
+    "unplugin-icons": "^0.14.6",
+    "unplugin-vue-components": "^0.20.1",
+    "vite": "^5.1.7",
+    "vite-plugin-inspect": "^0.8.3",
+    "vite-plugin-mkcert": "^1.17.5"
   }
 }

play/vite.config.ts

@@ -8,6 +8,9 @@ import Inspect from 'vite-plugin-inspect'
 import mkcert from 'vite-plugin-mkcert'
 import glob from 'fast-glob'
 import VueMacros from 'unplugin-vue-macros/vite'
+import AutoImport from 'unplugin-auto-import/vite'
+import Icons from 'unplugin-icons/vite'
+import IconsResolver from 'unplugin-icons/resolver'
 import esbuild from 'rollup-plugin-esbuild'
 import {
   epPackage,
@@ -16,20 +19,23 @@ import {
   pkgRoot,
   projRoot,
 } from '@element-plus/build-utils'
-import type { Plugin } from 'vite'
+import type { Plugin, UserConfigFnObject } from 'vite'
 import './vite.init'
 
-const esbuildPlugin = (): Plugin => ({
-  ...esbuild({
-    target: 'chrome64',
-    loaders: {
-      '.vue': 'js',
-    },
-  }),
-  enforce: 'post',
-})
+const pathSrc = path.resolve(__dirname, 'src')
+
+const esbuildPlugin = (): Plugin =>
+  ({
+    ...esbuild({
+      target: 'chrome64',
+      loaders: {
+        '.vue': 'js',
+      },
+    }),
+    enforce: 'post',
+  } as Plugin)
 
-export default defineConfig(async ({ mode }) => {
+export default defineConfig((async ({ mode }) => {
   const env = loadEnv(mode, process.cwd(), '')
   let { dependencies } = getPackageDependencies(epPackage)
   dependencies = dependencies.filter((dep) => !dep.startsWith('@types/')) // exclude dts deps
@@ -75,11 +81,36 @@ export default defineConfig(async ({ mode }) => {
       esbuildPlugin(),
       Components({
         include: `${__dirname}/**`,
-        resolvers: ElementPlusResolver({ importStyle: 'sass' }),
+        resolvers: [
+          // Auto register icon components
+          // 自动注册图标组件
+          IconsResolver({
+            /* options */
+          }),
+          ElementPlusResolver({ importStyle: 'sass' }),
+        ],
         dts: false,
       }),
       mkcert(),
       Inspect(),
+      AutoImport({
+        // Auto import functions from Vue, e.g. ref, reactive, toRef...
+        // 自动导入 Vue 相关函数，如：ref, reactive, toRef 等
+        imports: ['vue'],
+
+        // Auto import functions from Element Plus, e.g. ElMessage, ElMessageBox... (with style)
+        // 自动导入 Element Plus 相关函数，如：ElMessage, ElMessageBox... (带样式)
+        resolvers: [
+          // Auto import icon components
+          // 自动导入图标组件
+          IconsResolver({
+            // prefix: 'Icon',
+          }),
+        ],
+
+        dts: path.resolve(pathSrc, 'auto-imports.d.ts'),
+      }),
+      Icons({ autoInstall: true }),
     ],
 
     optimizeDeps: {
@@ -89,4 +120,4 @@ export default defineConfig(async ({ mode }) => {
       target: 'chrome64',
     },
   }
-})
+}) as UserConfigFnObject)