---

title: 快速开始

快速开始

本节用于让你用最短时间跑起 vue-uniapp-template。

1. 环境要求

• Node.js（建议 LTS）
• pnpm
• 微信开发者工具（仅小程序）

2. 安装依赖

在 vue-uniapp-template 目录执行：

pnpm install

3. 启动（H5）

pnpm run dev:h5

默认端口由 .env.development 的 VITE_APP_PORT 控制（当前为 4096）。

4. 启动（微信小程序）

4.1 编译

pnpm run dev:mp-weixin

4.2 导入微信开发者工具

• 导入目录：dist/dev/mp-weixin
• AppID：没有可使用测试号

4.3 本地设置（重要）

在微信开发者工具中：右上角 详情 → 本地设置：

• 勾选：不校验合法域名、web-view（业务域名）、TLS 版本以及 HTTPS 证书
• 取消勾选：过滤无依赖文件（否则可能导致组件无法加载）

5. 接口与环境变量

开发环境常用变量：

• VITE_APP_BASE_API：默认 /dev-api
• VITE_APP_API_URL：后端地址（例如 https://api.youlai.tech）
• VITE_APP_WS_ENDPOINT：WebSocket 地址（不配置则默认关闭 WebSocket）

生产环境可在 .env.production 覆盖 VITE_APP_BASE_API 等变量。

6. 请求与鉴权（你一定会用到）

项目请求封装位于 src/utils/request.ts，核心行为：

• 默认请求会自动携带 Authorization: Bearer <token>
• 未登录且请求未设置 skipAuth 时会自动跳转到 /pages/login/index

不同平台的请求基址规则：

• 微信小程序（MP-WEIXIN）：使用 VITE_APP_API_URL + url（完整 URL）
• 非微信小程序：使用 VITE_APP_BASE_API + url（通常走代理前缀）

7. 路由守卫（requireAuth）

路由封装在 src/router/index.ts，支持基于 meta.requireAuth 的登录拦截：

• 未登录会弹窗提示，并跳转到登录页
• 登录页支持携带 redirect 参数回跳