打包工具更换为vite

Co-authored-by: Copilot <copilot@github.com>

src/router.ts

@@ -8,16 +8,16 @@ const routes: Array<RouteRecordRaw> = [
   { path: '/login', name: 'Login', component: Login },
   { path: '/', name: 'Home', component: Home, children: [
     { path: '/', name: 'Welcome', component: Welcome },
-    { path: '/system/user', name: 'SystemUser', component: () => import( /* webpackChunkName: "system" */ '@/views/system/SystemUser.vue'), meta: { title: '用户管理' } },
-    { path: '/system/role', name: 'SystemRole', component: () => import( /* webpackChunkName: "system" */ '@/views/system/SystemRole.vue'), meta: { title: '角色管理' } },
-    { path: '/system/config', name: 'SystemConfig', component: () => import( /* webpackChunkName: "system" */ '@/views/system/SystemConfig.vue'), meta: { title: '系统配置' } },
-    { path: '/system/article', name: 'Article', component: () => import( /* webpackChunkName: "system" */ '@/views/system/Article.vue'), meta: { title: '博客文章' } },
-    { path: '/system/statistics', name: 'Statistics', component: () => import( /* webpackChunkName: "system" */ '@/views/system/Statistics.vue'), meta: { title: '分析统计' } },
+    { path: '/system/user', name: 'SystemUser', component: () => import('@/views/system/SystemUser.vue'), meta: { title: '用户管理' } },
+    { path: '/system/role', name: 'SystemRole', component: () => import('@/views/system/SystemRole.vue'), meta: { title: '角色管理' } },
+    { path: '/system/config', name: 'SystemConfig', component: () => import('@/views/system/SystemConfig.vue'), meta: { title: '系统配置' } },
+    { path: '/system/article', name: 'Article', component: () => import('@/views/system/Article.vue'), meta: { title: '博客文章' } },
+    { path: '/system/statistics', name: 'Statistics', component: () => import('@/views/system/Statistics.vue'), meta: { title: '分析统计' } },
 
-    { path: '/api/music', name: 'Music', component: () => import( /* webpackChunkName: "api" */ '@/views/api/Music.vue'), meta: { title: '歌曲库' } },
-    { path: '/api/hitokoto', name: 'Hitokoto', component: () => import( /* webpackChunkName: "api" */ '@/views/api/Hitokoto.vue'), meta: { title: '一言' } },
-    { path: '/api/photoWall', name: 'PhotoWall', component: () => import( /* webpackChunkName: "api" */ '@/views/api/PhotoWall.vue'), meta: { title: '照片墙' }  },
-    { path: '/api/sourceImage', name: 'SourceImage', component: () => import( /* webpackChunkName: "api" */ '@/views/api/SourceImage.vue'), meta: { title: '图片资源库' }  },
+    { path: '/api/music', name: 'Music', component: () => import('@/views/api/Music.vue'), meta: { title: '歌曲库' } },
+    { path: '/api/hitokoto', name: 'Hitokoto', component: () => import('@/views/api/Hitokoto.vue'), meta: { title: '一言' } },
+    { path: '/api/photoWall', name: 'PhotoWall', component: () => import('@/views/api/PhotoWall.vue'), meta: { title: '照片墙' }  },
+    { path: '/api/sourceImage', name: 'SourceImage', component: () => import('@/views/api/SourceImage.vue'), meta: { title: '图片资源库' }  },
   ]}
 ]
 

src/utils/http.ts

@@ -4,7 +4,7 @@ import store from '@/store'
 import { router } from '@/router'
 
 const http = axios.create({
-  baseURL: process.env.VUE_APP_API_BASE,
+  baseURL: import.meta.env.VUE_APP_API_BASE,
   timeout: 10000,
   paramsSerializer: {
     indexes: null

src/views/Home.vue

@@ -92,7 +92,7 @@ const store = useStore()
 const router = useRouter()
 const route = useRoute()
 
-const version = process.env.VERSION
+const version = __APP_VERSION__
 const currentYear = new Date().getFullYear()
 const defaultActiveMenuKey = ref<string | null>(null)
 const openMenuNames = ref<string[]>([])

src/views/api/Music.vue

@@ -210,7 +210,7 @@ class MusicPage extends Page {
 }
 
 const store = useStore()
-const apiBase = process.env.VUE_APP_API_BASE as string
+const apiBase = import.meta.env.VUE_APP_API_BASE
 const { loading, modalLoading, total, search, setLoadData, loadDataBase, reset, pageChange, pageSizeChange } = useBaseList(new MusicPage())
 const currentRow = ref<MusicModel | null>(null)
 const libIdSelected = ref<string | null>(null)

src/views/api/PhotoWall.vue

@@ -105,7 +105,7 @@ class PhotoWallPage extends Page {
 }
 
 const store = useStore()
-const apiBase = process.env.VUE_APP_API_BASE as string
+const apiBase = import.meta.env.VUE_APP_API_BASE
 const { loading, total, search, setLoadData, loadDataBase, reset, pageChange, pageSizeChange } = useBaseList(new PhotoWallPage())
 
 const allowUploadExt = ['jpg', 'jpeg', 'png']

src/views/api/SourceImage.vue

@@ -87,7 +87,7 @@ import { SourceImageModel } from '@/model/api/source-image'
 import http from '@/utils/http'
 
 const store = useStore()
-const apiBase = process.env.VUE_APP_API_BASE as string
+const apiBase = import.meta.env.VUE_APP_API_BASE
 const { loading, total, search, setLoadData, pageChange, pageSizeChange, datetimeFormat } = useBaseList(new Page())
 
 const allowUploadExt = ['jpg', 'jpeg', 'png', 'svg', 'ico']

src/views/api/aplayer/components/aplayer-icon.vue

@@ -4,10 +4,11 @@
 
 <script lang="ts" setup>
 import { computed } from 'vue'
+
 const props = defineProps<{type: string}>()
-const requireAssets = require.context('../assets', false, /\.svg$/)
-const SVGs = requireAssets.keys().reduce((svgs: {[propName:string]: string}, path: string) => {
-  const svgFile = requireAssets(path)
+const svgModules = import.meta.glob('../assets/*.svg', { eager: true, import: 'default' }) as Record<string, string>
+
+const SVGs = Object.entries(svgModules).reduce((svgs: {[propName:string]: string}, [path, svgFile]) => {
   const fileNameMatch = path.match(/^.*\/(.+?)\.svg$/)
   if (fileNameMatch) {
     svgs[fileNameMatch[1]] = svgFile

src/views/api/aplayer/vue-aplayer.vue

@@ -66,6 +66,7 @@
   import MusicList from './components/aplayer-list.vue'
   import Controls from './components/aplayer-controller.vue'
   import Lyrics from './components/aplayer-lrc.vue'
+  import Hls from 'hls.js'
   import { warn } from './utils'
 
   // mutex playing instance
@@ -667,20 +668,14 @@
             if (this.audio.canPlayType('application/x-mpegURL') || this.audio.canPlayType('application/vnd.apple.mpegURL')) {
               this.audio.src = src
             } else {
-              try {
-                const Hls = require('hls.js')
-                if (Hls.isSupported()) {
-                  if (!this.hls) {
-                    this.hls = new Hls()
-                  }
-                  this.hls.loadSource(src)
-                  this.hls.attachMedia(this.audio)
-                } else {
-                  warn('HLS is not supported on your browser')
-                  this.audio.src = src
+              if (Hls.isSupported()) {
+                if (!this.hls) {
+                  this.hls = new Hls()
                 }
-              } catch (e) {
-                warn('hls.js is required to support m3u8')
+                this.hls.loadSource(src)
+                this.hls.attachMedia(this.audio)
+              } else {
+                warn('HLS is not supported on your browser')
                 this.audio.src = src
               }
             }

src/views/system/Article.vue

@@ -111,11 +111,17 @@ import { useStore } from 'vuex'
 import hyperdown from 'hyperdown'
 import { ArticleModel, TreeNodeData, TreeNodeSource } from '@/model/system/article'
 import { ElMessage, ElMessageBox } from 'element-plus'
-import { Node } from 'element-plus/lib/components/tree/src/model/node'
 import { useBaseList } from '@/model/baselist'
 import { Page } from '@/model/common.dto'
 import http from '@/utils/http'
 
+type ArticleTreeNode = {
+  level: number
+  data: Pick<TreeNodeData, 'name'>
+}
+
+type TreeDataResolver = (data: TreeNodeData[]) => void
+
 class ArticlePage extends Page {
   title?: string
   createDate?: [Date, Date]
@@ -193,7 +199,7 @@ const treeProps = {
   children: 'children',
   isLeaf: 'isLeaf',
 }
-async function loadTreeData(node: Node, resolve: Function) {
+async function loadTreeData(node: ArticleTreeNode, resolve: TreeDataResolver) {
   const childItems: TreeNodeSource[] = await http.get('/article/tree', {params: {deep: node.level, parent: node.data.name}})
   resolve(childItems.map((childItem): TreeNodeData => {
     const treeNode: TreeNodeData = {

src/vite-env.d.ts

@@ -0,0 +1,12 @@
+/// <reference types="vite/client" />
+
+interface ImportMetaEnv {
+  readonly VUE_APP_API_BASE: string
+  readonly VUE_APP_PROXY_TARGET?: string
+}
+
+interface ImportMeta {
+  readonly env: ImportMetaEnv
+}
+
+declare const __APP_VERSION__: string