Vben Admin - 悦读

//项目结构

.
├── build # 打包脚本相关
│   ├── config # 配置文件
│   ├── generate # 生成器
│   ├── script # 脚本
│   └── vite # vite配置
├── mock # mock文件夹
├── public # 公共静态资源目录
├── src # 主目录
│   ├── api # 接口文件
│   ├── assets # 资源文件
│   │   ├── icons # icon sprite 图标文件夹
│   │   ├── images # 项目存放图片的文件夹
│   │   └── svg # 项目存放svg图片的文件夹
│   ├── components # 公共组件
│   ├── design # 样式文件
│   ├── directives # 指令
│   ├── enums # 枚举/常量
│   ├── hooks # hook
│   │   ├── component # 组件相关hook
│   │   ├── core # 基础hook
│   │   ├── event # 事件相关hook
│   │   ├── setting # 配置相关hook
│   │   └── web # web相关hook
│   ├── layouts # 布局文件
│   │   ├── default # 默认布局
│   │   ├── iframe # iframe布局
│   │   └── page # 页面布局
│   ├── locales # 多语言
│   ├── logics # 逻辑
│   ├── main.ts # 主入口
│   ├── router # 路由配置
│   ├── settings # 项目配置
│   │   ├── componentSetting.ts # 组件配置
│   │   ├── designSetting.ts # 样式配置
│   │   ├── encryptionSetting.ts # 加密配置
│   │   ├── localeSetting.ts # 多语言配置
│   │   ├── projectSetting.ts # 项目配置
│   │   └── siteSetting.ts # 站点配置
│   ├── store # 数据仓库
│   ├── utils # 工具类
│   └── views # 页面
├── test # 测试
│   └── server # 测试用到的服务
│       ├── api # 测试服务器
│       ├── upload # 测试上传服务器
│       └── websocket # 测试ws服务器
├── types # 类型文件
├── vite.config.ts # vite配置文件
└── windi.config.ts # windcss配置文件

//路由

项目路由配置存放于 src/router/routes 下面。 src/router/routes/modules用于存放路由模块，在该目录下的文件会自动注册。

//Vite

在浏览器支持 ES 模块之前，JavaScript 并没有提供的原生机制让开发者以模块化的方式进行开发。这也正是我们对 “打包” 这个概念熟悉的原因：使用工具抓取、处理并将我们的源码模块串联成可以在浏览器中运行的文件。

时过境迁，我们见证了诸如 webpack、Rollup 和 Parcel 等工具的变迁，它们极大地改善了前端开发者的开发体验。

然而，当我们开始构建越来越大型的应用时，需要处理的 JavaScript 代码量也呈指数级增长。包含数千个模块的大型项目相当普遍。我们开始遇到性能瓶颈 —— 使用 JavaScript 开发的工具通常需要很长时间（甚至是几分钟！）才能启动开发服务器，即使使用 HMR，文件修改后的效果也需要几秒钟才能在浏览器中反映出来。如此循环往复，迟钝的反馈会极大地影响开发者的开发效率和幸福感。

Vite 旨在利用生态系统中的新进展解决上述问题：浏览器开始原生支持 ES 模块，且越来越多 JavaScript 工具使用编译型语言编写。

// .env

# port 端口
VITE_PORT = 3100

# spa-title 名字
VITE_GLOB_APP_TITLE = Vben Admin

# spa shortname 轻应用
VITE_GLOB_APP_SHORT_NAME = vue_vben_admin

// .env.development 开发环境下的配置文件

# Whether to open mock 是否打开mock
VITE_USE_MOCK = true

# public path 公共通道
VITE_PUBLIC_PATH = /

# Cross-domain proxy, you can configure multiple 跨域代理，可以配置多个
# Please note that no line breaks 请注意不要换行
VITE_PROXY = [["/basic-api","http://localhost:3000"],["/upload","http://localhost:3300/upload"]]
# VITE_PROXY=[["/api","https://vvbin.cn/test"]]

# Delete console 删除控制台
VITE_DROP_CONSOLE = false

# Basic interface address SPA 基本接口地址
VITE_GLOB_API_URL=/basic-api

# File upload address， optional 文件上传地址，可选
VITE_GLOB_UPLOAD_URL=/upload

# Interface prefix 接口前缀
VITE_GLOB_API_URL_PREFIX=

// .env.production 生产环境下的配置文件

# Whether to open mock 是否开启mock
VITE_USE_MOCK = true

# public path 公共路径

VITE_PUBLIC_PATH = /

# Delete console 删除控制台
VITE_DROP_CONSOLE = true

# Whether to enable gzip or brotli compression  是否启用gzip或brotli压缩
# Optional: gzip | brotli | none 可选：gzip | brotli | none
# If you need multiple forms, you can use `,` to separate 如果需要多个表单，可以使用“，”分隔
VITE_BUILD_COMPRESS = 'none'

# Whether to delete origin files when using compress, default false 使用压缩时是否删除源文件，默认为false
VITE_BUILD_COMPRESS_DELETE_ORIGIN_FILE = false

# Basic interface address SPA 基本接口地址
VITE_GLOB_API_URL=/basic-api

# File upload address， optional 文件上传地址，可选
# It can be forwarded by nginx or write the actual address directly 它可以通过nginx转发，也可以直接写入实际地址
VITE_GLOB_UPLOAD_URL=/upload 

# Interface prefix 接口前缀
VITE_GLOB_API_URL_PREFIX=

# Whether to enable image compression  是否启用图像压缩
VITE_USE_IMAGEMIN= true

# use pwa 使用pwa
VITE_USE_PWA = false

# Is it compatible with older browsers 它与旧浏览器兼容吗
VITE_LEGACY = false

// .env.test 测试环境

# 通常这个变量用来区分开发与生产环境，加载不同的配置。
NODE_ENV=production 
# Whether to open mock 是否打开模拟
VITE_USE_MOCK = true

# public path
VITE_PUBLIC_PATH = /

# Delete console 公共通道
VITE_DROP_CONSOLE = true

# Whether to enable gzip or brotli compression 是否启用gzip或brotli压缩
# Optional: gzip | brotli | none 可选：gzip | brotli | none
# If you need multiple forms, you can use `,` to separate 如果需要多个表单，可以使用“，”分隔
VITE_BUILD_COMPRESS = 'none'

# Whether to delete origin files when using compress, default false 使用压缩时是否删除源文件，默认为false
VITE_BUILD_COMPRESS_DELETE_ORIGIN_FILE = false
 
# Basic interface address SPA 基本接口地址
VITE_GLOB_API_URL=/basic-api

# File upload address， optional 文件上传地址，可选
# It can be forwarded by nginx or write the actual address directly 它可以通过nginx转发，也可以直