本地开发
安装依赖
bash
pnpm install开发服务器配置
在 ./env.dev 中：
| 配置 | 值 | 说明 |
|---|---|---|
VITE_PORT | 4000 | 默认端口 |
VITE_PROXY | - | 代理地址 |
VITE_APP_REQUEST_TIMEOUT | 120000 | 请求超时时间 |
VITE_BASE_PATH | / | URL访问路径 |
VITE_API_URL | - | API 基础路径 |
VITE_REQUEST_PARAM_ENCRYPT | false | 是否加密请求参数 |
VITE_TITLE | Guava-Web | 站点标题 |
VITE_API_URL_PREFIX | `` | 统一请求前缀 |
VITE_BUILD_IMAGE | false | 打包是否压缩图片 |
VITE_MOCK | true | 是否开启模拟数据 |
VITE_MOCK_PATH | /mock | 模拟数据路径 |
VITE_DROP_CONSOLE | false | 是否移除 console.log |
VITE_DROP_DEBUGGER | false | 是否移除 debugger |
VITE_SOURCEMAP | true | 是否开启 source map |
VITE_USE_ALL_ELEMENT_PLUS_STYLE | true | 是否全量引入 Element Plus 样式 |
VITE_USE_ONLINE_ICON | false | 是否开启在线图标 |
VITE_BUNDLE_ANALYZER | false | 是否开启 analyzer 分析 |
启动开发服务器
bash
pnpm dev启动成功后访问：
http://localhost:4000/TIP
如果站点 base 配置为 /guava，本地 URL 需包含该路径前缀 http://localhost:4000/guava/。
新增功能页面
1、 在 views/ 下创建 <service>/<modulePath> 服务/功能 目录。
typescript
// 创建订单模块目录, 注意大小写
views / order / orderBasic;2、 在 <modulePath>/ 下创建 <ModulePath>Index.vue 功能主页文件。
typescript
// 订单基础功能主页文件, 注意大小写
views / order / orderBasic / OrderBasicIndex.vue;3、 依次在 <modulePath>/ 目录下创建该功能所需的子页面文件、工具文件及类型文件。
typescript
// 订单基础功能详情文件, 注意大小写
views / order / orderBasic / OrderBasicDetail.vue;
// 订单基础功能类型文件
views / order / orderBasic / type.d.ts;
// 订单基础功能工具文件
views / order / orderBasic / helper.tsx;4、 保存后 dev 服务器自动刷新。
5、编写功能代码。
类型检查
使用 Husky + lint-staged 的组合，在每次提交前自动执行类型检查。lint-staged 只会检查即将提交的暂存区文件，而不是整个项目，从而提升检查速度。当类型检查失败时，会阻止提交，并提示错误信息让开发者修复。
常见问题（开发阶段）
| 现象 | 处理 |
|---|---|
| 端口被占用 | 查看是否运行了多个开发服务器，或查看终端输出的实际端口，或关闭占用 4000 的进程 |
更多问题见 FAQ。
下一步
开发完成后，参见 生产构建 生成静态站点。