From 728d0a82de98b52e83b1f42e97a2267ba988d373 Mon Sep 17 00:00:00 2001
From: wf <2547096351@qq.com>
Date: Wed, 24 Apr 2024 13:02:25 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20vite=20server=E9=85=8D=E7=BD=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .eslintrc.cjs                                 | 150 ++++++------
 .prettierrc.cjs                               |  82 +++----
 .../Header/components/Breadcrumb/index.vue    |   2 +
 vite.config.ts                                | 215 +++++++++---------
 4 files changed, 228 insertions(+), 221 deletions(-)

diff --git a/.eslintrc.cjs b/.eslintrc.cjs
index bc6df86..e1fb68b 100644
--- a/.eslintrc.cjs
+++ b/.eslintrc.cjs
@@ -1,75 +1,75 @@
-module.exports = {
-  // 运行环境
-  env: {
-    browser: true,
-    es2021: true,
-    node: true // 配置后便会启用浏览器和 Node.js 环境，这两个环境中的一些全局变量(如 window 、 global 等)会同时启用。
-  },
-  // 指定如何解析语法 解析 .vue 文件
-  parser: "vue-eslint-parser",
-  // 解析器选项
-  parserOptions: {
-    ecmaVersion: "latest", // 可以配置 ES + 数字(如 ES6)或者 ES + 年份 (如 ES2015)，也可以直接配置为 latest ，启用最新的 ES 语法
-    parser: "@typescript-eslint/parser", // ts解析，将ts转换为estree格式，在eslint下通过Espree进行检查
-    sourceType: "module" // 默认为 script ，如果使用 ES Module 则应设置为 module
-  },
-
-  // 继承配置
-  extends: [
-    "./.eslintrc-auto-import.json", // 与vite.config.ts中的filepath路径一致
-    "plugin:vue/vue3-recommended",
-    "plugin:@typescript-eslint/recommended",
-    "prettier",
-    "plugin:prettier/recommended" // prettier配置要写在eslint配置后面
-  ],
-  // ESLint插件系统
-  // 添加插件后只是拓展了 ESLint 本身的规则集，但 ESLint 默认并没有开启这些规则的校验，需要在rules进行配置要开启或者调整这些规则
-  plugins: [
-    "@typescript-eslint", // 拓展一些关于 TS 代码的规则
-    "vue",
-    // 2. 加入 prettier 的 eslint 插件
-    "prettier"
-  ],
-  /**
-   * key 为规则名，value 配置内容，数组第一项为规则的ID ，第二项为规则的配置
-   * "off" 或 0    ==>  关闭规则
-   * "warn" 或 1   ==>  打开的规则作为警告（不影响代码执行）
-   * "error" 或 2  ==>  规则作为一个错误（代码不能执行，界面报错）
-   */
-  rules: {
-    // 配置：
-    // eslint (http://eslint.cn/docs/rules)
-    "no-var": "error", // 要求使用 let 或 const 而不是 var
-    "no-multiple-empty-lines": ["error", { max: 1 }], // 不允许多个空行
-    "prefer-const": "off", // 使用 let 关键字声明但在初始分配后从未重新分配的变量，要求使用 const
-    "no-use-before-define": "off", // 禁止在 函数/类/变量 定义之前使用它们
-
-    // 3. 注意要加上这一句，开启 prettier 自动修复的功能
-    "prettier/prettier": "error",
-
-    // typeScript (https://typescript-eslint.io/rules)
-    "@typescript-eslint/no-unused-vars": "error", // 禁止定义未使用的变量
-    "@typescript-eslint/no-empty-function": "error", // 禁止空函数
-    "@typescript-eslint/prefer-ts-expect-error": "error", // 禁止使用 @ts-ignore
-    "@typescript-eslint/ban-ts-comment": "error", // 禁止 @ts-<directive> 使用注释或要求在指令后进行描述
-    "@typescript-eslint/no-inferrable-types": "off", // 可以轻松推断的显式类型可能会增加不必要的冗长
-    "@typescript-eslint/no-namespace": "off", // 禁止使用自定义 TypeScript 模块和命名空间
-    "@typescript-eslint/no-explicit-any": "off", // 禁止使用 any 类型
-    "@typescript-eslint/ban-types": "off", // 禁止使用特定类型
-    "@typescript-eslint/no-var-requires": "off", // 允许使用 require() 函数导入模块
-    "@typescript-eslint/no-non-null-assertion": "off", // 不允许使用后缀运算符的非空断言(!)
-
-    // vue (https://eslint.vuejs.org/rules)
-    "vue/script-setup-uses-vars": "error", // 防止<script setup>使用的变量<template>被标记为未使用，此规则仅在启用该 no-unused-vars 规则时有效
-    "vue/v-slot-style": "error", // 强制执行 v-slot 指令样式
-    "vue/no-mutating-props": "error", // 不允许改变组件 prop
-    "vue/custom-event-name-casing": "error", // 为自定义事件名称强制使用特定大小写
-    "vue/html-closing-bracket-newline": "error", // 在标签的右括号之前要求或禁止换行
-    "vue/attribute-hyphenation": "error", // 对模板中的自定义组件强制执行属性命名样式：my-prop="prop"
-    "vue/attributes-order": "off", // vue api使用顺序，强制执行属性顺序
-    "vue/no-v-html": "off", // 禁止使用 v-html
-    "vue/require-default-prop": "off", // 此规则要求为每个 prop 为必填时，必须提供默认值
-    "vue/multi-word-component-names": "off", // 要求组件名称始终为 “-” 链接的单词
-    "vue/no-setup-props-destructure": "off" // 禁止解构 props 传递给 setup
-  }
-};
+module.exports = {
+  // 运行环境
+  env: {
+    browser: true,
+    es2021: true,
+    node: true // 配置后便会启用浏览器和 Node.js 环境，这两个环境中的一些全局变量(如 window 、 global 等)会同时启用。
+  },
+  // 指定如何解析语法 解析 .vue 文件
+  parser: "vue-eslint-parser",
+  // 解析器选项
+  parserOptions: {
+    ecmaVersion: "latest", // 可以配置 ES + 数字(如 ES6)或者 ES + 年份 (如 ES2015)，也可以直接配置为 latest ，启用最新的 ES 语法
+    parser: "@typescript-eslint/parser", // ts解析，将ts转换为estree格式，在eslint下通过Espree进行检查
+    sourceType: "module" // 默认为 script ，如果使用 ES Module 则应设置为 module
+  },
+
+  // 继承配置
+  extends: [
+    "./.eslintrc-auto-import.json", // 与vite.config.ts中的filepath路径一致
+    "plugin:vue/vue3-recommended",
+    "plugin:@typescript-eslint/recommended",
+    "prettier",
+    "plugin:prettier/recommended" // prettier配置要写在eslint配置后面
+  ],
+  // ESLint插件系统
+  // 添加插件后只是拓展了 ESLint 本身的规则集，但 ESLint 默认并没有开启这些规则的校验，需要在rules进行配置要开启或者调整这些规则
+  plugins: [
+    "@typescript-eslint", // 拓展一些关于 TS 代码的规则
+    "vue",
+    // 2. 加入 prettier 的 eslint 插件
+    "prettier"
+  ],
+  /**
+   * key 为规则名，value 配置内容，数组第一项为规则的ID ，第二项为规则的配置
+   * "off" 或 0    ==>  关闭规则
+   * "warn" 或 1   ==>  打开的规则作为警告（不影响代码执行）
+   * "error" 或 2  ==>  规则作为一个错误（代码不能执行，界面报错）
+   */
+  rules: {
+    // 配置：
+    // eslint (http://eslint.cn/docs/rules)
+    "no-var": "error", // 要求使用 let 或 const 而不是 var
+    "no-multiple-empty-lines": ["error", { max: 1 }], // 不允许多个空行
+    "prefer-const": "off", // 使用 let 关键字声明但在初始分配后从未重新分配的变量，要求使用 const
+    "no-use-before-define": "off", // 禁止在 函数/类/变量 定义之前使用它们
+
+    // 3. 注意要加上这一句，开启 prettier 自动修复的功能
+    "prettier/prettier": "error",
+
+    // typeScript (https://typescript-eslint.io/rules)
+    "@typescript-eslint/no-unused-vars": "error", // 禁止定义未使用的变量
+    "@typescript-eslint/no-empty-function": "error", // 禁止空函数
+    "@typescript-eslint/prefer-ts-expect-error": "error", // 禁止使用 @ts-ignore
+    "@typescript-eslint/ban-ts-comment": "error", // 禁止 @ts-<directive> 使用注释或要求在指令后进行描述
+    "@typescript-eslint/no-inferrable-types": "off", // 可以轻松推断的显式类型可能会增加不必要的冗长
+    "@typescript-eslint/no-namespace": "off", // 禁止使用自定义 TypeScript 模块和命名空间
+    "@typescript-eslint/no-explicit-any": "off", // 禁止使用 any 类型
+    "@typescript-eslint/ban-types": "off", // 禁止使用特定类型
+    "@typescript-eslint/no-var-requires": "off", // 允许使用 require() 函数导入模块
+    "@typescript-eslint/no-non-null-assertion": "off", // 不允许使用后缀运算符的非空断言(!)
+
+    // vue (https://eslint.vuejs.org/rules)
+    "vue/script-setup-uses-vars": "error", // 防止<script setup>使用的变量<template>被标记为未使用，此规则仅在启用该 no-unused-vars 规则时有效
+    "vue/v-slot-style": "error", // 强制执行 v-slot 指令样式
+    "vue/no-mutating-props": "error", // 不允许改变组件 prop
+    "vue/custom-event-name-casing": "error", // 为自定义事件名称强制使用特定大小写
+    "vue/html-closing-bracket-newline": "error", // 在标签的右括号之前要求或禁止换行
+    "vue/attribute-hyphenation": "error", // 对模板中的自定义组件强制执行属性命名样式：my-prop="prop"
+    "vue/attributes-order": "off", // vue api使用顺序，强制执行属性顺序
+    "vue/no-v-html": "off", // 禁止使用 v-html
+    "vue/require-default-prop": "off", // 此规则要求为每个 prop 为必填时，必须提供默认值
+    "vue/multi-word-component-names": "off", // 要求组件名称始终为 “-” 链接的单词
+    "vue/no-setup-props-destructure": "off" // 禁止解构 props 传递给 setup
+  }
+};
diff --git a/.prettierrc.cjs b/.prettierrc.cjs
index 98b2aa5..ae0de13 100644
--- a/.prettierrc.cjs
+++ b/.prettierrc.cjs
@@ -1,41 +1,41 @@
-// @see: https://www.prettier.cn
-
-module.exports = {
-  // 指定最大换行长度
-  printWidth: 130,
-  // 缩进制表符宽度 | 空格数
-  tabWidth: 2,
-  // 使用制表符而不是空格缩进行 (true：制表符，false：空格)
-  useTabs: false,
-  // 结尾不用分号 (true：有，false：没有)
-  semi: true,
-  // 使用单引号 (true：单引号，false：双引号)
-  singleQuote: false,
-  // 在对象字面量中决定是否将属性名用引号括起来 可选值 "<as-needed|consistent|preserve>"
-  quoteProps: "as-needed",
-  // 在JSX中使用单引号而不是双引号 (true：单引号，false：双引号)
-  jsxSingleQuote: false,
-  // 多行时尽可能打印尾随逗号 可选值"<none|es5|all>"
-  trailingComma: "none",
-  // 在对象，数组括号与文字之间加空格 "{ foo: bar }" (true：有，false：没有)
-  bracketSpacing: true,
-  // 将 > 多行元素放在最后一行的末尾，而不是单独放在下一行 (true：放末尾，false：单独一行)
-  bracketSameLine: false,
-  // (x) => {} 箭头函数参数只有一个时是否要有小括号 (avoid：省略括号，always：不省略括号)
-  arrowParens: "avoid",
-  // 指定要使用的解析器，不需要写文件开头的 @prettier
-  requirePragma: false,
-  // 可以在文件顶部插入一个特殊标记，指定该文件已使用 Prettier 格式化
-  insertPragma: false,
-  // 用于控制文本是否应该被换行以及如何进行换行
-  proseWrap: "preserve",
-  // 在html中空格是否是敏感的 "css" - 遵守 CSS 显示属性的默认值， "strict" - 空格被认为是敏感的 ，"ignore" - 空格被认为是不敏感的
-  htmlWhitespaceSensitivity: "css",
-  // 控制在 Vue 单文件组件中 <script> 和 <style> 标签内的代码缩进方式
-  vueIndentScriptAndStyle: false,
-  // 换行符使用 lf 结尾是 可选值 "<auto|lf|crlf|cr>"
-  endOfLine: "auto",
-  // 这两个选项可用于格式化以给定字符偏移量（分别包括和不包括）开始和结束的代码 (rangeStart：开始，rangeEnd：结束)
-  rangeStart: 0,
-  rangeEnd: Infinity,
-};
+// @see: https://www.prettier.cn
+
+module.exports = {
+  // 指定最大换行长度
+  printWidth: 130,
+  // 缩进制表符宽度 | 空格数
+  tabWidth: 2,
+  // 使用制表符而不是空格缩进行 (true：制表符，false：空格)
+  useTabs: false,
+  // 结尾不用分号 (true：有，false：没有)
+  semi: true,
+  // 使用单引号 (true：单引号，false：双引号)
+  singleQuote: false,
+  // 在对象字面量中决定是否将属性名用引号括起来 可选值 "<as-needed|consistent|preserve>"
+  quoteProps: "as-needed",
+  // 在JSX中使用单引号而不是双引号 (true：单引号，false：双引号)
+  jsxSingleQuote: false,
+  // 多行时尽可能打印尾随逗号 可选值"<none|es5|all>"
+  trailingComma: "none",
+  // 在对象，数组括号与文字之间加空格 "{ foo: bar }" (true：有，false：没有)
+  bracketSpacing: true,
+  // 将 > 多行元素放在最后一行的末尾，而不是单独放在下一行 (true：放末尾，false：单独一行)
+  bracketSameLine: false,
+  // (x) => {} 箭头函数参数只有一个时是否要有小括号 (avoid：省略括号，always：不省略括号)
+  arrowParens: "avoid",
+  // 指定要使用的解析器，不需要写文件开头的 @prettier
+  requirePragma: false,
+  // 可以在文件顶部插入一个特殊标记，指定该文件已使用 Prettier 格式化
+  insertPragma: false,
+  // 用于控制文本是否应该被换行以及如何进行换行
+  proseWrap: "preserve",
+  // 在html中空格是否是敏感的 "css" - 遵守 CSS 显示属性的默认值， "strict" - 空格被认为是敏感的 ，"ignore" - 空格被认为是不敏感的
+  htmlWhitespaceSensitivity: "css",
+  // 控制在 Vue 单文件组件中 <script> 和 <style> 标签内的代码缩进方式
+  vueIndentScriptAndStyle: false,
+  // 换行符使用 lf 结尾是 可选值 "<auto|lf|crlf|cr>"
+  endOfLine: "auto",
+  // 这两个选项可用于格式化以给定字符偏移量（分别包括和不包括）开始和结束的代码 (rangeStart：开始，rangeEnd：结束)
+  rangeStart: 0,
+  rangeEnd: Infinity,
+};
diff --git a/src/layout/components/Header/components/Breadcrumb/index.vue b/src/layout/components/Header/components/Breadcrumb/index.vue
index 4ce3e5b..040d7cf 100644
--- a/src/layout/components/Header/components/Breadcrumb/index.vue
+++ b/src/layout/components/Header/components/Breadcrumb/index.vue
@@ -47,9 +47,11 @@ const onBreadcrumb = (route: RouteLocationMatched) => {
 <style lang="scss" scoped>
 .main_button {
   color: $color-text-1;
+  cursor: pointer;
 }
 .route_button {
   color: $color-text-2;
+  cursor: pointer;
   &:hover {
     color: $color-primary;
   }
diff --git a/vite.config.ts b/vite.config.ts
index c8a9434..0add949 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -1,105 +1,110 @@
-import { defineConfig, normalizePath, loadEnv } from "vite";
-import vue from "@vitejs/plugin-vue";
-import path from "path";
-import { resolve } from "path";
-import postcssPresetEnv from "postcss-preset-env";
-import AutoImport from "unplugin-auto-import/vite";
-import Components from "unplugin-vue-components/vite";
-import { ArcoResolver } from "unplugin-vue-components/resolvers";
-import { vitePluginForArco } from "@arco-plugins/vite-vue";
-import { createSvgIconsPlugin } from "vite-plugin-svg-icons";
-const themePath = normalizePath(path.normalize("./src/style/global-theme.scss"));
-
-// https://vitejs.dev/config/
-export default defineConfig(({ mode }) => {
-  // 根路径
-  const root = process.cwd();
-  // 获取跟路径对应的文件
-  const env = loadEnv(mode, root);
-  return {
-    // 开发或生产环境服务的公共基础路径
-    base: env.VITE_PUBLIC_PATH,
-    plugins: [
-      vue(),
-      vitePluginForArco({
-        style: "css"
-      }),
-      createSvgIconsPlugin({
-        // 配置src下存放svg的路径，这里表示在src/icons文件夹下
-        iconDirs: [path.resolve(process.cwd(), "src/icons")],
-        symbolId: "icon-[dir]-[name]"
-      }),
-      AutoImport({
-        // 自动导入 Vue 相关函数，如：ref, reactive, toRef 等
-        imports: ["vue", "vue-router"],
-        resolvers: [ArcoResolver()],
-        // 解决eslint报错问题
-        eslintrc: {
-          // 这里先设置成true然后npm run dev 运行之后会生成 .eslintrc-auto-import.json 文件之后，在改为false
-          enabled: false,
-          filepath: "./.eslintrc-auto-import.json", // 生成的文件路径
-          globalsPropValue: true
-        },
-        // 配置文件生成位置
-        dts: "src/auto-import.d.ts"
-      }),
-      Components({
-        resolvers: [
-          ArcoResolver({
-            sideEffect: true
-          })
-        ],
-        // 自动加载组件的目录配置,默认的为 'src/components'
-        dirs: ["src/components"],
-        // 组件的有效文件扩展名
-        extensions: ["vue"],
-        // 配置文件生成位置
-        dts: "src/components.d.ts"
-      })
-    ],
-    resolve: {
-      // 配置别名-绝对路径
-      alias: {
-        "@assets": path.join(__dirname, "src/assets"),
-        "@": resolve(__dirname, "./src")
-      }
-    },
-    css: {
-      postcss: {
-        plugins: [postcssPresetEnv()]
-      },
-      preprocessorOptions: {
-        scss: {
-          // additionalData的内容会在每个scss文件的开头自动注入
-          additionalData: `@import "${themePath}";
-          `
-        }
-      }
-    },
-    build: {
-      outDir: "dist", // 指定打包路径，默认为项目根目录下的dist目录
-      minify: "esbuild", // esbuild打包更快但是不能去除console.log，terser打包慢但能去除console.log
-      // minify: "terser", // Vite 2.6.x 以上需要配置 minify："terser"，terserOptions才能生效，terser可以去除 console.log
-      // terserOptions: {
-      //   compress: {
-      //     keep_infinity: true, // 防止 Infinity 被压缩成 1/0，这可能会导致 Chrome 上的性能问题
-      //     drop_console: true, // 生产环境去除 console
-      //     drop_debugger: true // 生产环境去除 debugger
-      //   },
-      //   format: {
-      //     comments: false // 删除注释
-      //   }
-      // },
-      assetsInlineLimit: 4 * 1024, // 打包内联阈值4kb
-      chunkSizeWarningLimit: 2000, // 规定触发警告的 chunk 大小, 消除打包大小超过500kb警告
-      // 静态资源打包到dist下的不同目录,将文件类型css、js、jpg等文件分开存储
-      rollupOptions: {
-        output: {
-          chunkFileNames: "static/js/[name]-[hash].js",
-          entryFileNames: "static/js/[name]-[hash].js",
-          assetFileNames: "static/[ext]/[name]-[hash].[ext]"
-        }
-      }
-    }
-  };
-});
+import { defineConfig, normalizePath, loadEnv } from "vite";
+import vue from "@vitejs/plugin-vue";
+import path from "path";
+import { resolve } from "path";
+import postcssPresetEnv from "postcss-preset-env";
+import AutoImport from "unplugin-auto-import/vite";
+import Components from "unplugin-vue-components/vite";
+import { ArcoResolver } from "unplugin-vue-components/resolvers";
+import { vitePluginForArco } from "@arco-plugins/vite-vue";
+import { createSvgIconsPlugin } from "vite-plugin-svg-icons";
+const themePath = normalizePath(path.normalize("./src/style/global-theme.scss"));
+
+// https://vitejs.dev/config/
+export default defineConfig(({ mode }) => {
+  // 根路径
+  const root = process.cwd();
+  // 获取跟路径对应的文件
+  const env = loadEnv(mode, root);
+  return {
+    // 开发或生产环境服务的公共基础路径
+    base: env.VITE_PUBLIC_PATH,
+    server: {
+      host: "0.0.0.0",
+      open: true,
+      proxy: {}
+    },
+    plugins: [
+      vue(),
+      vitePluginForArco({
+        style: "css"
+      }),
+      createSvgIconsPlugin({
+        // 配置src下存放svg的路径，这里表示在src/icons文件夹下
+        iconDirs: [path.resolve(process.cwd(), "src/icons")],
+        symbolId: "icon-[dir]-[name]"
+      }),
+      AutoImport({
+        // 自动导入 Vue 相关函数，如：ref, reactive, toRef 等
+        imports: ["vue", "vue-router"],
+        resolvers: [ArcoResolver()],
+        // 解决eslint报错问题
+        eslintrc: {
+          // 这里先设置成true然后npm run dev 运行之后会生成 .eslintrc-auto-import.json 文件之后，在改为false
+          enabled: false,
+          filepath: "./.eslintrc-auto-import.json", // 生成的文件路径
+          globalsPropValue: true
+        },
+        // 配置文件生成位置
+        dts: "src/auto-import.d.ts"
+      }),
+      Components({
+        resolvers: [
+          ArcoResolver({
+            sideEffect: true
+          })
+        ],
+        // 自动加载组件的目录配置,默认的为 'src/components'
+        dirs: ["src/components"],
+        // 组件的有效文件扩展名
+        extensions: ["vue"],
+        // 配置文件生成位置
+        dts: "src/components.d.ts"
+      })
+    ],
+    resolve: {
+      // 配置别名-绝对路径
+      alias: {
+        "@assets": path.join(__dirname, "src/assets"),
+        "@": resolve(__dirname, "./src")
+      }
+    },
+    css: {
+      postcss: {
+        plugins: [postcssPresetEnv()]
+      },
+      preprocessorOptions: {
+        scss: {
+          // additionalData的内容会在每个scss文件的开头自动注入
+          additionalData: `@import "${themePath}";
+          `
+        }
+      }
+    },
+    build: {
+      outDir: "dist", // 指定打包路径，默认为项目根目录下的dist目录
+      minify: "esbuild", // esbuild打包更快但是不能去除console.log，terser打包慢但能去除console.log
+      // minify: "terser", // Vite 2.6.x 以上需要配置 minify："terser"，terserOptions才能生效，terser可以去除 console.log
+      // terserOptions: {
+      //   compress: {
+      //     keep_infinity: true, // 防止 Infinity 被压缩成 1/0，这可能会导致 Chrome 上的性能问题
+      //     drop_console: true, // 生产环境去除 console
+      //     drop_debugger: true // 生产环境去除 debugger
+      //   },
+      //   format: {
+      //     comments: false // 删除注释
+      //   }
+      // },
+      assetsInlineLimit: 4 * 1024, // 打包内联阈值4kb
+      chunkSizeWarningLimit: 2000, // 规定触发警告的 chunk 大小, 消除打包大小超过500kb警告
+      // 静态资源打包到dist下的不同目录,将文件类型css、js、jpg等文件分开存储
+      rollupOptions: {
+        output: {
+          chunkFileNames: "static/js/[name]-[hash].js",
+          entryFileNames: "static/js/[name]-[hash].js",
+          assetFileNames: "static/[ext]/[name]-[hash].[ext]"
+        }
+      }
+    }
+  };
+});