目录结构

完整版目录结构

├── build # build命令以及vite插件相关
│   ├── generate # less 配置全局导入（主要用于less配置文件全局使用）
│   ├── rollupOptions # vite rollupOptions 相关配置 （静态资源分类打包、配置external 插件）
│   ├── script # build 命令
│       ├── buildConf # 生产_app.config.js
│       └── postBuild # 展示包大小
│   ├── vite # vite 插件配置
        ├── plugin 插件配置
│           ├── viteMock # mock 插件 （本地配置，解决 vite-plugin-mock 插件 esbuild 和项目不一致，在自动加部署时产生 install 失败或者慢的问题） 
            ├── html # html 插件 （结合插件 vite-plugin-html 来注入 cdn 插件或者自定义js） 
│       └── optimizer.ts # vite build 配置Chunk（主要优化main.js 体积过大的问题）
├── config # 系统配置参数
    ├── default # 系统配置参数
        ├── defaultSettings.ts # 系统相关配置（cdn配置、proxy配置、水印配置、登录拦截配置、导入路由配置等）
        ├── network.ts # 网络相关配置
        ├── proxy.ts # 代理相关配置
├── mock # mock 模拟后台数据
    └── _createProductionServer.ts # 提供 setupProdMockServer 方法
├── public # 公共静态资源目录
├── src # 主目录
│   ├── assets # 资源文件
│   ├── common # 公共变量配置
│   ├── components # 公共组件
│   │   ├── GDesign # Gx Design 组件 （媒体展示、编辑器、上传等）
│   │   ├── PageLoading # 页面加载Loading 组件
│   ├── core # 自定义指令、自定义组件（包含Antd组件、GDesign组件）配置文件
│   │   ├── ant-design # Antd组件 在这里注入的组件共全局使用（没用 unplugin-vue-components 提供的需要在这个文件单个引入）
│   │   ├── gx-admin-design # components下的组件（不包含GDesign文件）（想全局引入的可以在这里设置）
│   │   ├── gx-admin-directives # 自定义指令
│   │   ├── gx-design # Gx Design 组件（/components/GDesign/相关组件）
│   │   └── gx-pro-design # Gx Design Pro 组件（@gx-design-vue相关组件在这里配置）
│   ├── design # 样式文件
│   │   ├── config.less # 提供全局引入的样式文件
│   │   └── ant-design # 处理antd样式文件 - 解决antd和项目实际样式的修改
│   ├── hooks # hook
│   │   ├── core # 基础hooks - useRequest（请求）
│   │   ├── event # 事件相关hooks - useClipboard（复制）
│   │   └── system # 系统相关hooks - useDict（获取数据字段）、useListUpload（批量上传 - 结合useOss等相关hooks方法）、usePermissions（权限判断）
│   ├── layouts # 布局文件
│   │   ├── BasicLayout.vue # 路由基础框架布局（使用的是ProLayout组件）
│   │   ├── ContentView.vue # 路由页面内容布局
│   │   ├── IframeView.vue # 页面iframe布局
│   │   └── UserLayout.vue # 注册、登录等系统外布局
│   ├── plugins # 插件
│   ├── router # 路由配置
│   │   ├── guard # 路由守卫
│   │       ├── permissions.ts # 路由权限处理（包括动态菜单、用户信息等基础信息）
│   │   ├── helper # 处理路由相关方法
│   │   └── routes # 路由数据配置
│   ├── services # api管理
│   ├── store # pinia数据仓库（提供useStore方法，可在项目内：import { useStore } form '@gx-vuex'  const store = userStore()）
│   ├── utils # 工具类
│       ├── request # request 请求方法（axios重定义，ts类型支持）
│       ├── crypto # 加密方法
            ├── base64.ts # base64 加密
            ├── index.ts # crypto-js 加密
│       ├── env.ts # env 环境 方法
│       ├── fetchFile.ts # 下载文件方法（fetch api）
│       ├── storage.ts # 本地存储文件方法（结合crypto-js实现加密，同时配置过期时间）
│       ├── uploadFile.ts # 修改文件名方法（oss等云方式上传，重新命名）
│       ├── util.ts # 常用方法配置
│       └── validate.ts # 常用验证正则方法配置
│   └── views # 业务页面
│   ├── App.vue # 主入口页面
│   └── main.ts # 主入口文件（router、pinia、unocss等）
├── types # 类型文件
│   └── ant-design-import.d # ant-design 组件自动导入
│   └── auto-imports.d # 自动导入的类型声明文件
│   └── components.d # 全局自定义组件类型声明文件
│   └── config.d # 系统配置的类型声明文件
│   └── global.d # 全局类型声明文件
│   └── index.d # 全局类型声明文件
│   └── mock.d # mock相关类型提示
│   └── module.d # 全局定义文件声明类型
│   └── response.d # requset请求的数据类型声明文件
├── .env  # 全局环境变量配置（当 .env 文件与 .env.development、.env.production、.env.pro 等其他环境文件之一存在相同的配置 key 时，.env 优先级更低）
├── .env.development  # 开发环境变量配置
    ├── VITE_NODE_ENV  # 项目启动执行环境（development、production两种）
    ├── VITE_USE_MODE  # 代码执行环境（development、pro等）
    ├── VITE_USE_MOCK  # mock 启用（true、false）
    ├── VITE_DROP_CONSOLE  # console 删除（true、false）
    ├── VITE_BUILD_COMPRESS  # build 产物（gzip | brotli | none）
    ├── VITE_BUILD_COMPRESS_DELETE_ORIGIN_FILE  # build 后是否删除源文件（true、false）
    ├── VITE_USE_PWA  # pwa（true、false）
    ├── VITE_LEGACY  # 是否为打包后的文件提供传统浏览器兼容性支持（true、false）
    ├── VITE_BASE_URL  # request api前缀（string）
    └── **  # 其他自定义配置
├── .env.production  # 生产环境（测试）变量配置
├── .env.*(可自定义名称来对应多环境配置)  # 生产环境（其他）变量配置
├── .env.pro  # 生产环境（正式）变量配置
├── .npmrc  # npm 配置文件
├── .prettierrc.js  # prettier 插件配置
├── .stylelintignore  # stylelint 插件检查忽略文件
├── index.html  # html 主入口
├── package.json  # 依赖包管理以及命令配置
├── pnpm-lock.yaml  # 依赖包版本锁定文件
├── postcss.config.js  # postcss 插件配置
├── stylelint.config.js  # stylelint 配置
├── tsconfig.json  # typescript 配置
├── vite.config.ts # vite配置

package.json - script 命令

{
  // 安装依赖
  "bootstrap": "pnpm i",
  // 运行项目
  "serve": "pnpm run dev",
  // 运行项目
  "dev": "pnpm run start:dev",
  // 运行项目 dev 环境
  "start:dev": "cross-env VITE_APP_ENV=dev vite",
  // 运行项目 production 环境
  "start:sit": "cross-env VITE_APP_ENV=dev vite --mode production",
  // 运行项目 pro 环境
  "start:pro": "cross-env VITE_APP_ENV=dev vite --mode pro",
  // 构建项目
  "build": "cross-env vite build && esno ./build/script/postBuild.ts",
  // 构建项目 pro 环境
  "build:pro": "cross-env vite build --mode pro && esno ./build/script/postBuild.ts",
  // 清空缓存后构建项目
  "build:no-cache": "yarn clean:cache && npm run build",
  // 生成打包分析，在 `Mac OS` 电脑上执行完成后会自动打开界面，在 `Window` 电脑上执行完成后需要打开 `./build/.cache/stats.html` 查看
  "report": "cross-env REPORT=true npm run build",
  // 类型检查
  "type:check": "vue-tsc --noEmit --skipLibCheck",
  // 预览打包后的内容（先打包在进行预览）
  "preview": "pnpm run build && vite preview",
  // 直接预览本地 dist 文件目录
  "preview:dist": "vite preview",
  // 删除缓存
  "clean:cache": "rimraf node_modules/.cache/ && rimraf node_modules/.vite",
  // 删除 node_modules (`window` 系统手动删除该目录较慢，可以使用该命令来进行删除)
  "clean:lib": "rimraf node_modules",
  // 执行 eslint 校验，并修复部分问题
  "lint:eslint": "eslint --cache --max-warnings 0  \"{src,mock}/**/*.{vue,ts,tsx}\" --fix",
  // 执行 prettier 格式化（该命令会对项目所有代码进行 prettier 格式化，请谨慎执行）
  "lint:prettier": "prettier --write  \"src/**/*.{js,json,tsx,css,less,scss,vue,html,md}\"",
  // 执行 stylelint 格式化
  "lint:stylelint": "stylelint --cache --fix \"**/*.{vue,less,postcss,css,scss}\" --cache --cache-location node_modules/.cache/stylelint/",
  // 重新安装依赖，见下方说明
  "reinstall": "rimraf yarn.lock && rimraf package.lock.json && rimraf node_modules && pnpm run bootstrap",
  "prepare": "husky install"
}