refactor: 优化 error page 页面

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"
   },

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}

src/views/error-page/403.vue

@@ -1,19 +1,16 @@
+<script lang="ts" setup>
+import Svg403 from "@/assets/error-page/403.svg?component" // vite-svg-loader 插件的功能
+</script>
+
 <template>
-  <div>
-    <p class="code">403</p>
-    <p class="describe">你没有权限去该页面</p>
+  <div class="error-page">
+    <Svg403 class="error-page-svg" />
+    <router-link to="/">
+      <el-button type="primary">回到首页</el-button>
+    </router-link>
   </div>
 </template>
 
 <style lang="scss" scoped>
-.code {
-  text-align: center;
-  font-size: 140px;
-  margin-bottom: 50px;
-}
-
-.describe {
-  text-align: center;
-  font-size: 40px;
-}
+@import "./index.scss";
 </style>

src/views/error-page/404.vue

@@ -1,19 +1,16 @@
+<script lang="ts" setup>
+import Svg404 from "@/assets/error-page/404.svg?component" // vite-svg-loader 插件的功能
+</script>
+
 <template>
-  <div>
-    <p class="code">404</p>
-    <p class="describe">未找到你想要的页面</p>
+  <div class="error-page">
+    <Svg404 class="error-page-svg" />
+    <router-link to="/">
+      <el-button type="primary">回到首页</el-button>
+    </router-link>
   </div>
 </template>
 
 <style lang="scss" scoped>
-.code {
-  text-align: center;
-  font-size: 140px;
-  margin-bottom: 50px;
-}
-
-.describe {
-  text-align: center;
-  font-size: 40px;
-}
+@import "./index.scss";
 </style>

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;
+  }
+}

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")],