From e4b5c2781e64fd96057062d83bbc22af1b46cb43 Mon Sep 17 00:00:00 2001 From: Defined <39450947+imaginarykhy@users.noreply.github.com> Date: Thu, 29 Sep 2022 20:34:25 +0800 Subject: [PATCH 1/3] =?UTF-8?q?feat:=20=E8=BF=9B=E5=85=A5=20404=20?= =?UTF-8?q?=E9=A1=B5=E9=9D=A2=E6=97=B6=E4=BF=9D=E7=95=99=E5=BD=93=E5=89=8D?= =?UTF-8?q?=20URL=20(#14)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/router/index.ts | 40 ++++++++++++++++++---------------------- 1 file changed, 18 insertions(+), 22 deletions(-) diff --git a/src/router/index.ts b/src/router/index.ts index b0df9fb5..5788be9a 100644 --- a/src/router/index.ts +++ b/src/router/index.ts @@ -17,6 +17,23 @@ export const constantRoutes: RouteRecordRaw[] = [ } ] }, + { + path: "/403", + component: () => import("@/views/error-page/403.vue"), + name: "403", + meta: { + hidden: true + } + }, + { + path: "/404", + component: () => import("@/views/error-page/404.vue"), + name: "404", + meta: { + hidden: true + }, + alias: "/:pathMatch(.*)*" + }, { path: "/login", component: () => import("@/views/login/index.vue"), @@ -173,32 +190,11 @@ export const asyncRoutes: RouteRecordRaw[] = [ }, { path: "/:pathMatch(.*)*", // 必须将 'ErrorPage' 路由放在最后, Must put the 'ErrorPage' route at the end - component: Layout, 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" - } - } - ] + } } ] From 3b40d4f1616c337b25603f6c0f05e7c499f74128 Mon Sep 17 00:00:00 2001 From: pany <939630029@qq.com> Date: Thu, 29 Sep 2022 21:13:00 +0800 Subject: [PATCH 2/3] =?UTF-8?q?fix:=20=E7=A7=BB=E9=99=A4=E8=B7=AF=E7=94=B1?= =?UTF-8?q?=E8=A1=A8=E4=B8=AD=E4=B8=8D=E5=BF=85=E8=A6=81=E7=9A=84=20name?= =?UTF-8?q?=20=E5=B1=9E=E6=80=A7?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/router/index.ts | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/src/router/index.ts b/src/router/index.ts index 5788be9a..2161c8d8 100644 --- a/src/router/index.ts +++ b/src/router/index.ts @@ -20,7 +20,6 @@ export const constantRoutes: RouteRecordRaw[] = [ { path: "/403", component: () => import("@/views/error-page/403.vue"), - name: "403", meta: { hidden: true } @@ -28,7 +27,6 @@ export const constantRoutes: RouteRecordRaw[] = [ { path: "/404", component: () => import("@/views/error-page/404.vue"), - name: "404", meta: { hidden: true }, @@ -189,7 +187,7 @@ export const asyncRoutes: RouteRecordRaw[] = [ ] }, { - path: "/:pathMatch(.*)*", // 必须将 'ErrorPage' 路由放在最后, Must put the 'ErrorPage' route at the end + path: "/:pathMatch(.*)*", // Must put the 'ErrorPage' route at the end, 必须将 'ErrorPage' 路由放在最后 redirect: "/404", name: "ErrorPage", meta: { From 5c3c6bdaa5ef8c0bd9ec7f7f44f38cf20230bcfc Mon Sep 17 00:00:00 2001 From: pany <939630029@qq.com> Date: Thu, 29 Sep 2022 22:38:27 +0800 Subject: [PATCH 3/3] =?UTF-8?q?refactor:=20=E4=BC=98=E5=8C=96=20error=20pa?= =?UTF-8?q?ge=20=E9=A1=B5=E9=9D=A2?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package.json | 1 + pnpm-lock.yaml | 9 +++++++++ src/assets/error-page/403.svg | 1 + src/assets/error-page/404.svg | 1 + src/views/error-page/403.vue | 23 ++++++++++------------- src/views/error-page/404.vue | 23 ++++++++++------------- src/views/error-page/index.scss | 11 +++++++++++ vite.config.ts | 3 +++ 8 files changed, 46 insertions(+), 26 deletions(-) create mode 100644 src/assets/error-page/403.svg create mode 100644 src/assets/error-page/404.svg create mode 100644 src/views/error-page/index.scss diff --git a/package.json b/package.json index fefd5618..5c6eeefb 100644 --- a/package.json +++ b/package.json @@ -61,6 +61,7 @@ "unocss": "^0.45.22", "vite": "^3.1.3", "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 8f0433c3..264c735b 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -35,6 +35,7 @@ specifiers: unocss: ^0.45.22 vite: ^3.1.3 vite-plugin-svg-icons: ^2.0.1 + vite-svg-loader: ^3.6.0 vue: ^3.2.39 vue-eslint-parser: ^9.1.0 vue-router: ^4.1.5 @@ -79,6 +80,7 @@ devDependencies: unocss: 0.45.22_vite@3.1.3 vite: 3.1.3_sass@1.55.0+terser@5.15.0 vite-plugin-svg-icons: 2.0.1_vite@3.1.3 + vite-svg-loader: 3.6.0 vue-eslint-parser: 9.1.0_eslint@8.23.1 vue-tsc: 0.40.13_typescript@4.8.3 @@ -3776,6 +3778,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.3_sass@1.55.0+terser@5.15.0: resolution: {integrity: sha512-/3XWiktaopByM5bd8dqvHxRt5EEgRikevnnrpND0gRfNkrMrPaGGexhtLCzv15RcCMtV2CLw+BPas8YFeSG0KA==} 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/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")],