docs: 📚 新增说明文档

README.md

@@ -0,0 +1,312 @@
+# Vite相关使用
+
+## .env文件
+
+### 文件名简介
+
+- `.env`：公用配置文件
+- `.env.development`：开发环境配置
+- `.env.production`：生产话就配置
+
+### 修改环境前缀
+
+在配置文件中加上`envPrefix`
+
+```ts
+export default defineConfig(
+	(): UserConfig => ({
+		envPrefix: 'BUNNY',
+	}),
+);
+```
+
+## 使用gzip
+
+安装
+
+```sh
+npm i vite-plugin-compress
+```
+
+需要文件中引入
+
+```js
+import compress from 'vite-plugin-compress';
+
+export default {
+	plugins: [compress()],
+};
+```
+
+## 动态加载路由
+
+```ts
+import { routeFilenameHelper } from '@/utils/file/routeFileUtil';
+import _ from 'lodash';
+import { RouteRecordRaw } from 'vue-router';
+
+// * 最终路由
+const routeMap: Record<string, RouteRecordRaw> = {};
+
+// * 所有处理的路由
+const contexts = [
+	{ context: import.meta.glob('@/views/**/index.vue', { eager: true, import: 'default' }), isIndex: true },
+	{ context: import.meta.glob('@/views/**/page.ts', { eager: true, import: 'default' }), isIndex: false },
+];
+
+/**
+ * 构建路由信息
+ * @param context 上下文信息
+ * @param isIndex 是否第一次遍历
+ * @param route 路由内容
+ */
+function buildRouteTree(context: any, isIndex: boolean, route: any) {
+	// 遍历当前子路由
+	Object.entries(context).forEach(([filePath, _]) => {
+		// 获取子路由下所有文件对象格式
+		const childrenFileInfo = routeFilenameHelper(filePath);
+		// 组装子路由对象
+		const childrenRoute: any = {
+			name: childrenFileInfo?.name,
+			path: childrenFileInfo!.path,
+			component: isIndex ? context[filePath] : undefined,
+			children: [],
+			meta: { isFullScreen: false },
+		};
+		// 如果当前路由对象等于当前遍历的路由子对象，将子路由推到父级路由中
+		if (childrenFileInfo?.path.includes(route.path) && childrenFileInfo?.path !== route.path) {
+			route.children.push(childrenRoute);
+		}
+	});
+}
+
+/**
+ * 遍历路由信息
+ * @param context 路由上下文
+ * @param isIndex 是否为索引遍历
+ */
+const createRouteList = (context: any, isIndex: boolean) => {
+	Object.entries(context).forEach(([filePath, exportRouteConfig]) => {
+		const fileInfo = routeFilenameHelper(filePath);
+		// 组装路由对象
+		const route: any = {
+			name: fileInfo?.name,
+			path: fileInfo!.path,
+			component: isIndex ? context[filePath] : undefined,
+			children: [],
+			meta: { isFullScreen: false },
+		};
+
+		// 初始化赋值
+		if (isIndex) {
+			routeMap[route.path] = route;
+			buildRouteTree(context, isIndex, route);
+		} else {
+			// 导出当前存在的路由并重新赋值
+			const existingRoute = routeMap[route.path];
+			// 当前路由存在
+			if (existingRoute) {
+				// 使用loadsh合并对象
+				routeMap[route.path] = _.merge(existingRoute, exportRouteConfig);
+			}
+		}
+	});
+};
+
+// * 生成路由信息
+contexts.forEach(({ context, isIndex }) => createRouteList(context, isIndex));
+
+export const pageRoutes: Array<RouteRecordRaw> = Object.values(routeMap);
+```
+
+> 需要注意的是，为了动态导入生产环境也可以运行，需要`context[filePath]`需要使用这段话，才可以
+
+## 输出环境变量内容
+
+```ts
+console.log(import.meta.env);
+```
+
+## 动态加载CDN
+
+在Module中配置相关内容，相关文档查看：https://www.npmjs.com/package/vite-plugin-cdn-import
+
+```ts
+import vue from '@vitejs/plugin-vue';
+import { resolve } from 'path';
+import { defineConfig, UserConfig } from 'vite';
+import cdn from 'vite-plugin-cdn-import';
+
+export default defineConfig(
+	(): UserConfig => ({
+		plugins: [
+			cdn({
+				modules: [],
+			}),
+		],
+	}),
+);
+```
+
+> ```
+> npm i vite-plugin-cdn-import
+> ```
+
+## 兼容老版本浏览器
+
+在plugin中加入
+
+```ts
+legacy({ targets: ["defaults", "not IE 11"] }),
+```
+
+详细配置查看：https://www.npmjs.com/package/@vitejs/plugin-legacy
+
+## 打包设置
+
+如果打包中包含`node_module`包全部放到`vendor-[hash].js`中
+
+![image-20240527152054024](./images/image-20240527152054024.png)
+
+## 配置跨域
+
+`process.env.BUNNY_APP_URL`设置在这三个文件中，读取是这三个配置
+
+![image-20240527152136447](./images/image-20240527152136447.png)
+
+```ts
+server: {
+  host: "0.0.0.0",
+    port
+:
+  6261,
+    open
+:
+  true,
+    cors
+:
+  true,
+    proxy
+:
+  {
+    "/api"
+  :
+    {
+      target: process.env.BUNNY_APP_URL,
+        changeOrigin
+    :
+      true,
+        rewrite
+    :
+      (path: string) => path.replace(/^\/api/, "/api")
+    }
+  ,
+    "/mock"
+  :
+    {
+      target: process.env.BUNNY_APP_URL,
+        changeOrigin
+    :
+      true,
+        rewrite
+    :
+      (path: string) => path.replace(/^\/mock/, "/mock")
+    }
+  }
+}
+,
+```
+
+## 配置JSX
+
+项目中已经设置好了JSX相关功能
+
+![image-20240527152316666](./images/image-20240527152316666.png)
+
+## Mock和多语言
+
+### Mock设置
+
+在环境已经设置好了Mock，只需要在`/src/mock`中写代码即可。
+
+### 多语言设置
+
+多语言现在作为网络请求来发送，在pinia中设置本地持久存储。
+
+后端需要按照返回格式进行传送
+
+![image-20240527152545485](./images/image-20240527152545485.png)
+
+发送请求和初始化放在`App.vue`中
+
+![image-20240527153132792](./images/image-20240527153132792.png)
+
+#### 多语言只做本地化
+
+只需要在`i18n`中加入你的语言，之后在`index.ts`中引用即可
+
+![image-20240527153316912](./images/image-20240527153316912.png)
+
+格式大致如下
+
+![image-20240527153421787](./images/image-20240527153421787.png)
+
+#### 后端返回多语言格式
+
+这个格式也可以改，默认的如下。需要包含默认语言`local:xxx`
+
+```
+{
+    "i18n": {
+        "zh_cn": {
+            "login": {
+                "reset": "重置",
+                "register": "登录"
+            },
+            "home": {
+                "articleModeAlbum": "相册模式",
+                "articleModeList": "列表模式"
+            },
+            "tabs": {},
+            "header": {
+                "fullScreen": "全屏",
+                "exitFullScreen": "退出全屏",
+                "personalData": "个人信息",
+                "changePassword": "修改密码",
+                "logout": "退出登录"
+            },
+            "tip": {
+                "loading": "加载中..."
+            }
+        },
+        "en": {
+            "login": {
+                "reset": "reset",
+                "register": "register"
+            },
+            "home": {
+                "articleModeAlbum": "Album Mode",
+                "articleModeList": "List Mode"
+            },
+            "tabs": {},
+            "header": {
+                "fullScreen": "Full Screen",
+                "exitFullScreen": "Exit Full Screen",
+                "personalData": "Personal Data",
+                "changePassword": "Change Password",
+                "logout": "Logout"
+            },
+            "tip": {
+                "loading": "Loading..."
+            }
+        },
+        "local": "zh_cn"
+    }
+}
+```
+
+### Vue指令
+
+配置了打印、复制、水印等指令
+
+![image-20240527153512670](./images/image-20240527153512670.png)