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] =?UTF-8?q?refactor:=20=E4=BC=98=E5=8C=96=20error=20page?= =?UTF-8?q?=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 fefd561..5c6eeef 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 8f0433c..264c735 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 0000000..a925322 --- /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 0000000..d59f6f1 --- /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 a4eea91..2d5670f 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 f031e23..46dff0e 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 0000000..bee1a20 --- /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 445cfdd..cbdbb19 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")],