feat: update vite to 5.x

README.md

@@ -2,7 +2,7 @@
 
 The plus version of vue3-admin-ts , provide enterprise-class using demo
 
-suggestion the Node.js >= 16.0.0。
+suggestion the Node.js >= 18.0.0。
 
 
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue3-admin-plus",
-  "version": "2.1.0",
+  "version": "2.2.0",
   "license": "MIT",
   "author": "kuanghua",
   "packageManager": "pnpm@7.9.0",
@@ -95,7 +95,7 @@
     "unocss": "^0.33.5",
     "unplugin-auto-import": "^0.11.2",
     "unplugin-vue-components": "^0.22.8",
-    "vite": "^4.4.9",
+    "vite": "^5.0.4",
     "vite-plugin-mkcert": "^1.7.2",
     "vite-plugin-mock": "^2.9.6",
     "vite-plugin-svg-icons": "^2.0.1",
@@ -127,5 +127,9 @@
     "> 1%",
     "not ie 11",
     "not op_mini all"
-  ]
+  ],
+"engines": {
+    "node": ">= 18 <20",
+    "pnpm": ">= 6 <9"
+}
 }

src/components/ColumnFilter.vue

@@ -33,13 +33,13 @@
 <script setup>
 import { computed, nextTick, onMounted, ref, unref } from 'vue'
 import { ClickOutside as vClickOutside } from 'element-plus'
+
+import Draggable from 'vuedraggable'
 const buttonRef = ref()
 const popoverRef = ref()
 const onClickOutside = () => {
   unref(popoverRef).popperRef?.delayHide?.()
 }
-
-import Draggable from 'vuedraggable'
 const props = defineProps({
   cols: {
     type: Array

src/components/FileUpload/index.vue

@@ -34,11 +34,11 @@
 </template>
 
 <script setup>
+import { reactive, ref } from 'vue'
 import { CloseBold, Plus } from '@element-plus/icons-vue'
+import { ElMessage } from 'element-plus'
 import axiosReq from '@/utils/axios-req'
 // import { watermark } from './imgDillUtils'
-import { ElMessage } from 'element-plus'
-import { reactive, ref } from 'vue'
 import {spliceMinioUrl} from "@/hooks/use-common";
 
 const imageList = ref([])

src/hooks/use-error-log.ts

@@ -1,10 +1,10 @@
 /*js 错误日志收集*/
 import { jsErrorCollection } from 'js-error-collection'
+import axiosReq from 'axios'
 import pack from '../../package.json'
 import settings from '@/settings'
 import bus from '@/utils/bus'
 //此处不要使用utils下的axios
-import axiosReq from 'axios'
 const reqUrl = '/integration-front/errorCollection/insert'
 let repeatErrorLogJudge = ''
 const errorLogReq = (errLog: string) => {

src/main.ts

@@ -2,6 +2,8 @@ import { createApp } from 'vue'
 import { createPinia } from 'pinia'
 import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'
 import ElementPlus from 'element-plus'
+import JsonEditorVue from 'json-editor-vue3'
+import VXETable from 'vxe-table'
 import App from './App.vue'
 import router from './router'
 
@@ -26,19 +28,21 @@ import './permission'
 
 //import element-plus
 import 'element-plus/dist/index.css'
-const app = createApp(App)
 //import element-plus svg icon
 import ElSvgIcon from '@/lib/el-svg-icon'
-app.use(ElSvgIcon)
 
-import JsonEditorVue from 'json-editor-vue3'
-app.use(JsonEditorVue)
-//router
-app.use(router)
 
 //jsonEidt
 import 'jsoneditor'
 
+//import vxe-table
+import 'vxe-table/lib/style.css'
+const app = createApp(App)
+app.use(ElSvgIcon)
+app.use(JsonEditorVue)
+//router
+app.use(router)
+
 //pinia
 const pinia = createPinia()
 pinia.use(piniaPluginPersistedstate)
@@ -51,10 +55,6 @@ directive(app)
 
 //element-plus
 app.use(ElementPlus)
-
-//import vxe-table
-import VXETable from 'vxe-table'
-import 'vxe-table/lib/style.css'
 app.use(VXETable)
 
 app.mount('#app')

src/permission.ts

@@ -1,9 +1,9 @@
+import settings from './settings'
 import router from '@/router'
 import { filterAsyncRouter, progressClose, progressStart } from '@/hooks/use-permission'
 import { useBasicStore } from '@/store/basic'
 import { getRouterReq, userInfoReq } from '@/api/user'
 import { langTitle } from '@/hooks/use-common'
-import settings from './settings'
 
 //路由进入前拦截
 //to:将要进入的页面 vue-router4.0 不推荐使用next()

src/router/index.ts

@@ -1,11 +1,11 @@
 import { createRouter, createWebHashHistory } from 'vue-router'
-import Layout from '@/layout/index.vue'
 /* Router Modules */
 import charts from './modules/charts'
 import guid from './modules/guid'
 import excel from './modules/excel'
 import directive from './modules/directive'
 import table from './modules/table'
+import Layout from '@/layout/index.vue'
 export const constantRoutes = [
   {
     path: '/redirect',

src/views/d3/relation-map.vue

@@ -26,10 +26,10 @@
 
 <script>
 import { onMounted, reactive, ref } from 'vue'
+import * as d3 from 'd3'
 import useData from './useDatas'
 import useD3 from './useD3'
 import data from './data.json'
-import * as d3 from 'd3'
 import NodeDetail from './component/NodeDetail.vue'
 
 export default {

src/views/excel/exportExcel.vue

@@ -38,11 +38,11 @@
 </template>
 
 <script setup>
-import { Download } from '@element-plus/icons-vue'
 import { onBeforeMount, toRefs } from 'vue'
-import { transactionList } from '@/api/remote-search'
-import { aoaToSheetXlsx } from './excel'
+import { Download } from '@element-plus/icons-vue'
 import { ElMessage } from 'element-plus'
+import { aoaToSheetXlsx } from './excel'
+import { transactionList } from '@/api/remote-search'
 const statusFilter = (status) => {
   const statusMap = {
     published: 'success',

src/views/excel/importExcel.vue

@@ -23,8 +23,8 @@
 </template>
 
 <script setup>
-import { Upload } from '@element-plus/icons-vue'
 import { toRefs } from 'vue'
+import { Upload } from '@element-plus/icons-vue'
 import { importsExcel } from './excel'
 
 const state = reactive({

src/views/guide/index.vue

@@ -13,9 +13,9 @@
 <script setup>
 import Driver from 'driver.js'
 import 'driver.js/dist/driver.min.css'
-import steps from './steps'
 import { QuestionFilled } from '@element-plus/icons-vue'
 import { useI18n } from 'vue-i18n'
+import steps from './steps'
 
 const { t } = useI18n()
 let driver = ref()

src/views/system/dept/index-hook.ts

@@ -1,5 +1,5 @@
-import { deleteReq, exportReq } from '@/api/dept'
 import { ElMessage } from 'element-plus'
+import { deleteReq, exportReq } from '@/api/dept'
 const single = ref(true)
 const multiple = ref(true)
 /*table 列表*/

src/views/system/dept/index.vue

@@ -97,13 +97,18 @@
   </div>
 </template>
 <script setup>
+import { onMounted, reactive, ref } from 'vue'
+import AddEditModal from './AddEditModal.vue'
+import { colChange, currentHook, handleAdd, handleSelectionChange, removeEmptyKey } from './index-hook'
 import { listReq } from '@/api/dept'
 import { useDict } from '@/hooks/use-data-dict'
-import { onMounted, reactive, ref } from 'vue'
 //导入当前页面封装方法
 import RightToolBar from '@/components/RightToolBar.vue'
 import ColumnFilter from '@/components/ColumnFilter.vue'
-import AddEditModal from './AddEditModal.vue'
+
+///导入当前页面封装方法
+import { resetData } from '@/hooks/use-common'
+import { handleTree } from '@/views/system/menu/index-hook'
 /*查询模块*/
 const queryParams = reactive({
   pageNum: 1,
@@ -162,11 +167,6 @@ onMounted(() => {
 //字典数据
 // eslint-disable-next-line camelcase
 const { sys_normal_disable } = useDict(['sys_normal_disable'])
-
-///导入当前页面封装方法
-import { colChange, currentHook, handleAdd, handleSelectionChange, removeEmptyKey } from './index-hook'
-import { resetData } from '@/hooks/use-common'
-import { handleTree } from '@/views/system/menu/index-hook'
 const {
   refAddEditModal,
   refElTable,

src/views/system/dict-data/index-hook.ts

@@ -1,6 +1,6 @@
+import { ElMessage } from 'element-plus'
 import { deleteReq, exportReq } from '@/api/dictData'
 import { downLoadTemp } from '@/hooks/use-common'
-import { ElMessage } from 'element-plus'
 const single = ref(true)
 const multiple = ref(true)
 /*table 列表*/

src/views/system/dict-data/index.vue

@@ -115,13 +115,18 @@
   </div>
 </template>
 <script setup>
+import { onMounted, reactive, ref } from 'vue'
+import AddEditModal from './AddEditModal.vue'
+import { colChange, currentHook, handleSelectionChange, removeEmptyKey } from './index-hook'
 import { listReq } from '@/api/dictData'
 import { useDict } from '@/hooks/use-data-dict'
-import { onMounted, reactive, ref } from 'vue'
 //导入当前页面封装方法
 import RightToolBar from '@/components/RightToolBar.vue'
 import ColumnFilter from '@/components/ColumnFilter.vue'
-import AddEditModal from './AddEditModal.vue'
+
+///导入当前页面封装方法
+import { resetData } from '@/hooks/use-common'
+import { getQueryParam } from '@/hooks/use-self-router.ts'
 /*查询模块*/
 const queryParams = reactive({
   pageNum: 1,
@@ -177,11 +182,6 @@ onMounted(() => {
 //字典数据
 // eslint-disable-next-line camelcase
 const { sys_normal_disable } = useDict(['sys_normal_disable'])
-
-///导入当前页面封装方法
-import { colChange, currentHook, handleSelectionChange, removeEmptyKey } from './index-hook'
-import { resetData } from '@/hooks/use-common'
-import { getQueryParam } from '@/hooks/use-self-router.ts'
 const {
   refAddEditModal,
   refElTable,

src/views/system/dict/index-hook.ts

@@ -1,6 +1,6 @@
+import { ElMessage } from 'element-plus'
 import { deleteReq, exportReq } from '@/api/dict'
 import { downLoadTemp } from '@/hooks/use-common'
-import { ElMessage } from 'element-plus'
 const single = ref(true)
 const multiple = ref(true)
 /*table 列表*/

src/views/system/dict/index.vue

@@ -141,13 +141,18 @@
   </div>
 </template>
 <script setup>
+import { onMounted, reactive, ref } from 'vue'
+import AddEditModal from './AddEditModal.vue'
+import { colChange, currentHook, handleAdd, handleSelectionChange, removeEmptyKey } from './index-hook'
 import { listReq } from '@/api/dict'
 import { useDict } from '@/hooks/use-data-dict'
-import { onMounted, reactive, ref } from 'vue'
 //导入当前页面封装方法
 import RightToolBar from '@/components/RightToolBar.vue'
 import ColumnFilter from '@/components/ColumnFilter.vue'
-import AddEditModal from './AddEditModal.vue'
+
+///导入当前页面封装方法
+import { resetData } from '@/hooks/use-common'
+import { routerPush } from '@/hooks/use-self-router.ts'
 /*查询模块*/
 const queryParams = reactive({
   pageNum: 1,
@@ -199,11 +204,6 @@ onMounted(() => {
 // 字典数据
 // eslint-disable-next-line camelcase
 const { sys_normal_disable } = useDict(['sys_normal_disable'])
-
-///导入当前页面封装方法
-import { colChange, currentHook, handleAdd, handleSelectionChange, removeEmptyKey } from './index-hook'
-import { resetData } from '@/hooks/use-common'
-import { routerPush } from '@/hooks/use-self-router.ts'
 const {
   refAddEditModal,
   refElTable,

src/views/system/login-info/index-hook.ts

@@ -1,5 +1,5 @@
-import { deleteReq, exportReq } from '@/api/loginInfo'
 import { ElMessage } from 'element-plus'
+import { deleteReq, exportReq } from '@/api/loginInfo'
 const single = ref(true)
 const multiple = ref(true)
 /*table 列表*/

src/views/system/menu/AddEditModal.vue

@@ -163,14 +163,14 @@
 </template>
 
 <script setup>
-import JsonInput from '@/components/JsonInput.vue'
+import {ref} from 'vue'
 import {ElMessage} from 'element-plus'
+import IconSelect from './IconSelect.vue'
+import JsonInput from '@/components/JsonInput.vue'
 import {addMenu, getMenu, listMenuReq, updateMenu} from '@/api/menu'
 import {useDict} from '@/hooks/use-data-dict'
 import {resetData} from '@/hooks/use-common'
-import IconSelect from './IconSelect.vue'
 import {handleTree} from '@/views/system/menu/index-hook'
-import {ref} from 'vue'
 import {selectPlatformAll} from '@/api/platform.ts'
 
 const showChooseIcon = ref(false)

src/views/system/menu/index-hook.js

@@ -1,5 +1,5 @@
-import { deleteReq } from '@/api/menu'
 import { ElMessage } from 'element-plus'
+import { deleteReq } from '@/api/menu'
 const single = ref(true)
 const multiple = ref(true)
 /*table 列表*/

src/views/system/menu/index.vue

@@ -117,13 +117,19 @@
   </div>
 </template>
 <script setup>
+import { computed, onMounted, reactive, ref, watch } from 'vue'
+import AddEditModal from './AddEditModal.vue'
+import { colChange, currentHook, handleImport, handleSelectionChange, handleTree, removeEmptyKey } from './index-hook'
 import ColumnFilter from '@/components/ColumnFilter.vue'
 import RightToolBar from '@/components/RightToolBar.vue'
-import AddEditModal from './AddEditModal.vue'
 import DictTag from '@/components/DictTag.vue'
 import { listMenuReq } from '@/api/menu'
 import { useDict } from '@/hooks/use-data-dict'
-import { computed, onMounted, reactive, ref, watch } from 'vue'
+
+//导入当前页面封装方法
+import { resetData } from '@/hooks/use-common'
+import { selectPlatformAll } from '@/api/platform.ts'
+import settings from '@/settings.ts'
 /*查询模块*/
 const queryParams = reactive({
   pageNum: 1,
@@ -192,12 +198,6 @@ onMounted(() => {
 //字典数据
 // eslint-disable-next-line camelcase
 const { sys_normal_disable, sys_show_hide } = useDict(['sys_normal_disable'])
-
-//导入当前页面封装方法
-import { colChange, currentHook, handleImport, handleSelectionChange, handleTree, removeEmptyKey } from './index-hook'
-import { resetData } from '@/hooks/use-common'
-import { selectPlatformAll } from '@/api/platform.ts'
-import settings from '@/settings.ts'
 const {
   refAddEditModal,
   refElTable,

src/views/system/operator-log/index-hook.ts

@@ -1,6 +1,6 @@
+import { ElMessage } from 'element-plus'
 import { deleteReq, exportReq } from '@/api/operatorLog'
 import { downLoadTemp } from '@/hooks/use-common'
-import { ElMessage } from 'element-plus'
 const single = ref(true)
 const multiple = ref(true)
 /*table 列表*/