升级vite

Web/package.json

@@ -2,6 +2,7 @@
   "name": "uav-manage-web",
   "version": "1.0.0",
   "description": "无人机管理系统",
+  "type": "module",
   "license": "ISC",
   "scripts": {
     "start": "vite",
@@ -10,96 +11,30 @@
   "dependencies": {
     "@amap/amap-jsapi-loader": "^1.0.1",
     "@ant-design/icons-vue": "^6.0.1",
-    "@vitejs/plugin-legacy": "^1.6.2",
     "agora-rtc-sdk-ng": "^4.12.1",
     "ant-design-vue": "^2.2.8",
     "axios": "^0.21.1",
     "eventemitter3": "^5.0.0",
     "mitt": "^3.0.0",
     "mqtt": "^4.3.7",
-    "query-string": "^7.0.1",
     "reconnecting-websocket": "^4.4.0",
     "vconsole": "^3.8.1",
-    "vite-plugin-components": "^0.13.3",
-    "vite-plugin-importer": "^0.2.5",
-    "vite-plugin-optimize-persist": "^0.1.2",
-    "vite-plugin-package-config": "^0.1.1",
-    "vue": "^3.2.26",
-    "vue-cookies": "^1.7.4",
+    "vue": "^3.2.0",
     "vue-i18n": "^9.1.6",
     "vue-router": "4",
-    "vuex": "^4.0.2"
+    "vuex": "^4.0.0"
   },
   "devDependencies": {
     "@types/node": "^18.15.0",
     "@types/urlencode": "^1.1.2",
-    "@vitejs/plugin-vue": "^1.2.4",
+    "@vitejs/plugin-vue": "^5.0.5",
     "@vue/compiler-sfc": "^3.0.5",
     "rollup-plugin-external-globals": "^0.6.1",
     "sass": "^1.35.1",
     "typescript": "^4.5.4",
-    "vite": "^2.4.0",
-    "vite-plugin-style-import": "^1.0.1",
-    "vite-plugin-svg-icons": "^1.0.5",
+    "unplugin-vue-components": "^0.27.0",
+    "vite": "^5.3.0",
+    "vite-plugin-svg-icons": "^1.1.0",
     "vite-plugin-vconsole": "^1.1.0"
-  },
-  "vite": {
-    "optimizeDeps": {
-      "include": [
-        "@amap/amap-jsapi-loader",
-        "@ant-design/icons-vue",
-        "@vue/reactivity",
-        "agora-rtc-sdk-ng",
-        "ant-design-vue",
-        "ant-design-vue/es",
-        "ant-design-vue/es/avatar/style/css",
-        "ant-design-vue/es/breadcrumb/style/css",
-        "ant-design-vue/es/button/style/css",
-        "ant-design-vue/es/checkbox/style/css",
-        "ant-design-vue/es/col/style/css",
-        "ant-design-vue/es/collapse/style/css",
-        "ant-design-vue/es/date-picker/style/css",
-        "ant-design-vue/es/divider/style/css",
-        "ant-design-vue/es/drawer/style/css",
-        "ant-design-vue/es/dropdown/style/css",
-        "ant-design-vue/es/empty/style/css",
-        "ant-design-vue/es/form/style/css",
-        "ant-design-vue/es/image/style/css",
-        "ant-design-vue/es/input-number/style/css",
-        "ant-design-vue/es/input/style/css",
-        "ant-design-vue/es/layout/style/css",
-        "ant-design-vue/es/menu/style/css",
-        "ant-design-vue/es/message/style/css",
-        "ant-design-vue/es/modal/style/css",
-        "ant-design-vue/es/pagination/style/css",
-        "ant-design-vue/es/popconfirm/style/css",
-        "ant-design-vue/es/popover/style/css",
-        "ant-design-vue/es/progress/style/css",
-        "ant-design-vue/es/radio/style/css",
-        "ant-design-vue/es/row/style/css",
-        "ant-design-vue/es/select/style/css",
-        "ant-design-vue/es/space/style/css",
-        "ant-design-vue/es/spin/style/css",
-        "ant-design-vue/es/switch/style/css",
-        "ant-design-vue/es/table/style/css",
-        "ant-design-vue/es/tag/style/css",
-        "ant-design-vue/es/time-picker/style/css",
-        "ant-design-vue/es/tooltip/style/css",
-        "ant-design-vue/es/tree/style/css",
-        "ant-design-vue/es/upload/style/css",
-        "axios",
-        "eventemitter3",
-        "lodash",
-        "mitt",
-        "moment",
-        "mqtt",
-        "mqtt/dist/mqtt.min",
-        "reconnecting-websocket",
-        "vconsole",
-        "vue",
-        "vue-router",
-        "vuex"
-      ]
-    }
   }
 }

Web/src/main.ts

@@ -2,7 +2,6 @@ import App from './App.vue'
 import router from './router'
 import { antComponents } from './antd'
 import { CommonComponents } from './use-common-components'
-import 'virtual:svg-icons-register'
 import store, { storeKey } from './store'
 import { createInstance } from '/@/root'
 import { useDirectives } from './directives'

Web/src/typings/components.d.ts

@@ -0,0 +1,89 @@
+/* eslint-disable */
+// @ts-nocheck
+// Generated by unplugin-vue-components
+// Read more: https://github.com/vuejs/core/pull/3399
+export {}
+
+/* prettier-ignore */
+declare module 'vue' {
+  export interface GlobalComponents {
+    AAvatar: typeof import('ant-design-vue/es')['Avatar']
+    AButton: typeof import('ant-design-vue/es')['Button']
+    AButtonGroup: typeof import('ant-design-vue/es')['ButtonGroup']
+    ACol: typeof import('ant-design-vue/es')['Col']
+    ACollapse: typeof import('ant-design-vue/es')['Collapse']
+    ACollapsePanel: typeof import('ant-design-vue/es')['CollapsePanel']
+    AConfigProvider: typeof import('ant-design-vue/es')['ConfigProvider']
+    ADivider: typeof import('ant-design-vue/es')['Divider']
+    ADrawer: typeof import('ant-design-vue/es')['Drawer']
+    ADropdown: typeof import('ant-design-vue/es')['Dropdown']
+    AEmpty: typeof import('ant-design-vue/es')['Empty']
+    AForm: typeof import('ant-design-vue/es')['Form']
+    AFormItem: typeof import('ant-design-vue/es')['FormItem']
+    AImage: typeof import('ant-design-vue/es')['Image']
+    AInput: typeof import('ant-design-vue/es')['Input']
+    AInputNumber: typeof import('ant-design-vue/es')['InputNumber']
+    AInputSearch: typeof import('ant-design-vue/es')['InputSearch']
+    ALayout: typeof import('ant-design-vue/es')['Layout']
+    ALayoutContent: typeof import('ant-design-vue/es')['LayoutContent']
+    ALayoutHeader: typeof import('ant-design-vue/es')['LayoutHeader']
+    ALayoutSider: typeof import('ant-design-vue/es')['LayoutSider']
+    AMenu: typeof import('ant-design-vue/es')['Menu']
+    AMenuItem: typeof import('ant-design-vue/es')['MenuItem']
+    AModal: typeof import('ant-design-vue/es')['Modal']
+    APopconfirm: typeof import('ant-design-vue/es')['Popconfirm']
+    APopover: typeof import('ant-design-vue/es')['Popover']
+    AProgress: typeof import('ant-design-vue/es')['Progress']
+    ARadio: typeof import('ant-design-vue/es')['Radio']
+    ARadioButton: typeof import('ant-design-vue/es')['RadioButton']
+    ARadioGroup: typeof import('ant-design-vue/es')['RadioGroup']
+    ARangePicker: typeof import('ant-design-vue/es')['RangePicker']
+    ARow: typeof import('ant-design-vue/es')['Row']
+    ASelect: typeof import('ant-design-vue/es')['Select']
+    ASelectOption: typeof import('ant-design-vue/es')['SelectOption']
+    ASpin: typeof import('ant-design-vue/es')['Spin']
+    ASwitch: typeof import('ant-design-vue/es')['Switch']
+    ATable: typeof import('ant-design-vue/es')['Table']
+    ATag: typeof import('ant-design-vue/es')['Tag']
+    ATextarea: typeof import('ant-design-vue/es')['Textarea']
+    ATimePicker: typeof import('ant-design-vue/es')['TimePicker']
+    ATooltip: typeof import('ant-design-vue/es')['Tooltip']
+    ATree: typeof import('ant-design-vue/es')['Tree']
+    ATreeNode: typeof import('ant-design-vue/es')['TreeNode']
+    AUpload: typeof import('ant-design-vue/es')['Upload']
+    CreatePlan: typeof import('./../components/task/CreatePlan.vue')['default']
+    DeviceFirmwareStatus: typeof import('./../components/devices/DeviceFirmwareStatus.vue')['default']
+    DeviceFirmwareUpgrade: typeof import('./../components/devices/device-upgrade/DeviceFirmwareUpgrade.vue')['default']
+    DeviceFirmwareUpgradeModal: typeof import('./../components/devices/device-upgrade/DeviceFirmwareUpgradeModal.vue')['default']
+    DeviceHmsDrawer: typeof import('./../components/devices/device-hms/DeviceHmsDrawer.vue')['default']
+    DeviceLogDetailModal: typeof import('./../components/devices/device-log/DeviceLogDetailModal.vue')['default']
+    DeviceLogUploadModal: typeof import('./../components/devices/device-log/DeviceLogUploadModal.vue')['default']
+    DeviceLogUploadRecordDrawer: typeof import('./../components/devices/device-log/DeviceLogUploadRecordDrawer.vue')['default']
+    DeviceSettingBox: typeof import('./../components/g-map/DeviceSettingBox.vue')['default']
+    DeviceSettingPopover: typeof import('./../components/g-map/DeviceSettingPopover.vue')['default']
+    DividerLine: typeof import('./../components/workspace/DividerLine.vue')['default']
+    DockControlPanel: typeof import('./../components/g-map/DockControlPanel.vue')['default']
+    DroneControlInfoPanel: typeof import('./../components/g-map/DroneControlInfoPanel.vue')['default']
+    DroneControlPanel: typeof import('./../components/g-map/DroneControlPanel.vue')['default']
+    DroneControlPopover: typeof import('./../components/g-map/DroneControlPopover.vue')['default']
+    FlightAreaActionIcon: typeof import('./../components/flight-area/FlightAreaActionIcon.vue')['default']
+    FlightAreaDevicePanel: typeof import('./../components/flight-area/FlightAreaDevicePanel.vue')['default']
+    FlightAreaIcon: typeof import('./../components/flight-area/FlightAreaIcon.vue')['default']
+    FlightAreaItem: typeof import('./../components/flight-area/FlightAreaItem.vue')['default']
+    FlightAreaPanel: typeof import('./../components/flight-area/FlightAreaPanel.vue')['default']
+    FlightAreaSyncPanel: typeof import('./../components/flight-area/FlightAreaSyncPanel.vue')['default']
+    GMap: typeof import('./../components/GMap.vue')['default']
+    LayersTree: typeof import('./../components/LayersTree.vue')['default']
+    LivestreamAgora: typeof import('./../components/livestream-agora.vue')['default']
+    LivestreamOthers: typeof import('./../components/livestream-others.vue')['default']
+    MediaPanel: typeof import('./../components/MediaPanel.vue')['default']
+    Nav: typeof import('./../components/common/nav.vue')['default']
+    RouterLink: typeof import('vue-router')['RouterLink']
+    RouterView: typeof import('vue-router')['RouterView']
+    Sidebar: typeof import('./../components/common/sidebar.vue')['default']
+    SvgIcon: typeof import('./../components/svgIcon.vue')['default']
+    TaskPanel: typeof import('./../components/task/TaskPanel.vue')['default']
+    Title: typeof import('./../components/workspace/Title.vue')['default']
+    Topbar: typeof import('./../components/common/topbar.vue')['default']
+  }
+}

Web/vite.config.ts

@@ -1,41 +1,18 @@
 import vue from '@vitejs/plugin-vue'
 import path from 'path'
 import { ConfigEnv, defineConfig, UserConfigExport } from 'vite'
-import ViteComponents, { AntDesignVueResolver } from 'vite-plugin-components'
-import OptimizationPersist from 'vite-plugin-optimize-persist'
-import PkgConfig from 'vite-plugin-package-config'
-import viteSvgIcons from 'vite-plugin-svg-icons'
+import Components from 'unplugin-vue-components/vite';
+import { AntDesignVueResolver } from 'unplugin-vue-components/resolvers';
 import { viteVConsole } from 'vite-plugin-vconsole'
 
 export default ({ command, mode }: ConfigEnv): UserConfigExport => defineConfig({
-  plugins: [
-    vue(),
-    ViteComponents({
-      customComponentResolvers: [AntDesignVueResolver()],
-    }),
-    viteSvgIcons({
-      // 指定需要缓存的图标文件夹
-      iconDirs: [path.resolve(process.cwd(), 'src/assets/icons')],
-      // 指定symbolId格式
-      symbolId: 'icon-[dir]-[name]',
-    }),
-    viteVConsole({
-      entry: path.resolve(__dirname, './src/main.ts'), // 入口文件
-      localEnabled: command === 'serve', // serve开发环境下
-      // enabled: command !== 'serve' || mode === 'test', // 打包环境下/发布测试包,
-      config: { // vconsole 配置项
-        maxLogNumber: 1000,
-        theme: 'light'
-      }
-    }),
-    PkgConfig(),
-    OptimizationPersist()
-    // [svgBuilder('./src/assets/icons/')] // All svg under src/icons/svg/ have been imported here, no need to import separately
-  ],
-  server: {
-    open: true,
-    host: '0.0.0.0',
-    port: 8080
+  base: '/',
+  css: {
+    preprocessorOptions: {
+      scss: {
+        additionalData: '@import "./src/styles/variables";'
+      },
+    }
   },
   resolve: {
     alias: [
@@ -45,18 +22,29 @@ export default ({ command, mode }: ConfigEnv): UserConfigExport => defineConfig(
       }
     ]
   },
-  css: {
-    preprocessorOptions: {
-      scss: {
-        // example : additionalData: `@import "./src/design/styles/variables";`
-        // dont need include file extend .scss
-        additionalData: '@import "./src/styles/variables";'
-      },
-    }
+  server: {
+    open: true,
+    host: '0.0.0.0',
+    port: 8080
   },
-  base: '/',
   build: {
     target: ['es2015'], // 最低支持 es2015
     sourcemap: true
-  }
+  },
+  plugins: [
+    vue(),
+    Components({// 自动导入组件
+      resolvers: [AntDesignVueResolver({ importStyle: false })],
+      dts: 'src/typings/components.d.ts'
+    }),
+    viteVConsole({
+      entry: path.resolve(__dirname, './src/main.ts'), // 入口文件
+      localEnabled: command === 'serve', // serve开发环境下
+      // enabled: command !== 'serve' || mode === 'test', // 打包环境下/发布测试包,
+      config: { // vconsole 配置项
+        maxLogNumber: 1000,
+        theme: 'light'
+      }
+    }),
+  ],
 })