diff --git a/package.json b/package.json index d5fb0d8b..44bd56f9 100644 --- a/package.json +++ b/package.json @@ -61,6 +61,7 @@ "unocss": "^0.45.26", "vite": "^3.1.4", "vite-plugin-svg-icons": "^2.0.1", + "vite-svg-loader": "^3.6.0", "vue-eslint-parser": "^9.1.0", "vue-tsc": "^0.40.13" }, diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 5c22cfd5..ecc5c25e 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -35,7 +35,8 @@ specifiers: unocss: ^0.45.26 vite: ^3.1.4 vite-plugin-svg-icons: ^2.0.1 - vue: ^3.2.40 + vite-svg-loader: ^3.6.0 + vue: ^3.2.39 vue-eslint-parser: ^9.1.0 vue-router: ^4.1.5 vue-tsc: ^0.40.13 @@ -79,6 +80,7 @@ devDependencies: unocss: 0.45.26_vite@3.1.4 vite: 3.1.4_sass@1.55.0+terser@5.15.0 vite-plugin-svg-icons: 2.0.1_vite@3.1.4 + vite-svg-loader: 3.6.0 vue-eslint-parser: 9.1.0_eslint@8.24.0 vue-tsc: 0.40.13_typescript@4.8.4 @@ -3764,6 +3766,13 @@ packages: - supports-color dev: true + /vite-svg-loader/3.6.0: + resolution: {integrity: sha512-bZJffcgCREW57kNkgMhuNqeDznWXyQwJ3wKrRhHLMMzwDnP5jr3vXW3cqsmquRR7VTP5mLdKj1/zzPPooGUuPw==} + dependencies: + '@vue/compiler-sfc': 3.2.39 + svgo: 2.8.0 + dev: true + /vite/3.1.4_sass@1.55.0+terser@5.15.0: resolution: {integrity: sha512-JoQI08aBjY9lycL7jcEq4p9o1xUjq5aRvdH4KWaXtkSx7e7RpAh9D3IjzDWRD4Fg44LS3oDAIOG/Kq1L+82psA==} engines: {node: ^14.18.0 || >=16.0.0} diff --git a/src/assets/error-page/403.svg b/src/assets/error-page/403.svg new file mode 100644 index 00000000..a9253223 --- /dev/null +++ b/src/assets/error-page/403.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/error-page/404.svg b/src/assets/error-page/404.svg new file mode 100644 index 00000000..d59f6f17 --- /dev/null +++ b/src/assets/error-page/404.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/router/index.ts b/src/router/index.ts index b0df9fb5..2161c8d8 100644 --- a/src/router/index.ts +++ b/src/router/index.ts @@ -17,6 +17,21 @@ export const constantRoutes: RouteRecordRaw[] = [ } ] }, + { + path: "/403", + component: () => import("@/views/error-page/403.vue"), + meta: { + hidden: true + } + }, + { + path: "/404", + component: () => import("@/views/error-page/404.vue"), + meta: { + hidden: true + }, + alias: "/:pathMatch(.*)*" + }, { path: "/login", component: () => import("@/views/login/index.vue"), @@ -172,33 +187,12 @@ export const asyncRoutes: RouteRecordRaw[] = [ ] }, { - path: "/:pathMatch(.*)*", // 必须将 'ErrorPage' 路由放在最后, Must put the 'ErrorPage' route at the end - component: Layout, + path: "/:pathMatch(.*)*", // Must put the 'ErrorPage' route at the end, 必须将 'ErrorPage' 路由放在最后 redirect: "/404", name: "ErrorPage", meta: { - title: "错误页面", - icon: "404", hidden: true - }, - children: [ - { - path: "403", - component: () => import("@/views/error-page/403.vue"), - name: "403", - meta: { - title: "403" - } - }, - { - path: "404", - component: () => import("@/views/error-page/404.vue"), - name: "404", - meta: { - title: "404" - } - } - ] + } } ] diff --git a/src/views/error-page/403.vue b/src/views/error-page/403.vue index a4eea915..2d5670fe 100644 --- a/src/views/error-page/403.vue +++ b/src/views/error-page/403.vue @@ -1,19 +1,16 @@ + + diff --git a/src/views/error-page/404.vue b/src/views/error-page/404.vue index f031e234..46dff0eb 100644 --- a/src/views/error-page/404.vue +++ b/src/views/error-page/404.vue @@ -1,19 +1,16 @@ + + diff --git a/src/views/error-page/index.scss b/src/views/error-page/index.scss new file mode 100644 index 00000000..bee1a208 --- /dev/null +++ b/src/views/error-page/index.scss @@ -0,0 +1,11 @@ +.error-page { + height: 100%; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + &-svg { + width: 400px; + margin-bottom: 50px; + } +} diff --git a/vite.config.ts b/vite.config.ts index 445cfddb..cbdbb193 100644 --- a/vite.config.ts +++ b/vite.config.ts @@ -3,6 +3,7 @@ import type { ConfigEnv, UserConfigExport } from "vite" import path, { resolve } from "path" import vue from "@vitejs/plugin-vue" import { createSvgIconsPlugin } from "vite-plugin-svg-icons" +import svgLoader from "vite-svg-loader" import UnoCSS from "unocss/vite" /** 配置项文档：https://cn.vitejs.dev/config */ @@ -65,6 +66,8 @@ export default (configEnv: ConfigEnv): UserConfigExport => { /** Vite 插件 */ plugins: [ vue(), + /** 将 SVG 静态图转化为 Vue 组件 */ + svgLoader(), /** SVG */ createSvgIconsPlugin({ iconDirs: [path.resolve(process.cwd(), "src/icons/svg")],