rxthinkcmf/rxthinkcmf-wiki
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

签入版本

Browse Source
This commit is contained in:
gitadmin
2026-10-11 19:39:51 +08:00
parent 4084c6bd17
commit 35b8748a68
507 changed files with 147 additions and 56499 deletions
Download Patch File Download Diff File Expand all files Collapse all files
RXThinkCMF_Laravel13_NaiveVue/zh/course.md
+1 -1
View File
@@ -247,7 +247,7 @@ pnpm dev
```
:::tip 温馨提示
前端默认运行在 `8001` 端口，后端默认 `8000` 端口。Vite 开发代理由 `ui/.env.development` 的 `VITE_PROXY` 决定（默认转发到 `http://admin.laravel13.naivevue/api`；直连 `php artisan serve` 时改为 `http://admin.laravel13.naivevue/api`，改后重启生效）。登录后请立即修改默认密码。
前端默认运行在 `8001` 端口，后端默认 `8000` 端口。Vite 开发代理由 `ui/.env.development` 的 `VITE_PROXY` 决定（当前指向 `http://admin.laravel13.naivevue/api`，修改后重启 `pnpm dev` 生效）。登录后请立即修改默认密码。
:::
## 第五步：功能验证
RXThinkCMF_Laravel13_NaiveVue/zh/frontend/env-config.md
+68 -57
View File
@@ -10,10 +10,8 @@
ui/
├── .env # 所有环境通用配置（端口、标题）
├── .env.development # 开发环境（pnpm dev，默认 mode）
├── .env.production # 生产构建（pnpm build）
├── .env.test # 测试构建（pnpm build:test）
├── .env.uat # UAT 构建（pnpm build:uat）
└── .env.dev # dev 模式构建（pnpm build:dev）
├── .env.production # 生产构建（pnpm build / pnpm build:prod）
└── .env.test # 测试构建（pnpm build:test）
```
**加载优先级：** `.env.{mode}` > `.env`（Vite 标准加载规则，可用 `.env.{mode}.local` 做本地覆盖）
@@ -23,41 +21,39 @@ ui/
### `.env.development`
```bash
# 开发服务器端口
# 只在开发模式中被载入
VITE_PORT = 8001
# 公共基础路径（通常为 /）
# 网站根目录
VITE_PUBLIC_PATH = /
# 是否启用 Mock 数据（false = 使用真实后端 API）
# 是否开启mock
VITE_USE_MOCK = false
# 是否删除 console（当前项目开发构建同样删除）
# 网站前缀
VITE_BASE_URL = /
# 是否删除console
VITE_DROP_CONSOLE = true
# 开发代理（JSON 数组格式：[["前缀","目标地址"]]）
# 跨域代理，可以配置多个，请注意不要换行
VITE_PROXY=[["/api","http://admin.laravel13.naivevue/api"]]
# API 接口基础路径（留空，由代理处理）
# API 接口地址
VITE_GLOB_API_URL =
# 上传接口地址（留空，走同域/代理）
VITE_GLOB_UPLOAD_URL=
# 图片上传地址
VITE_GLOB_UPLOAD_URL =
# 图片前缀地址（留空，按后端返回的地址解析）
VITE_GLOB_IMG_URL=
# 图片前缀地址
VITE_GLOB_IMG_URL =
# 构建压缩方式：none / gzip / brotli
VITE_BUILD_COMPRESS = 'none'
VITE_BUILD_COMPRESS_DELETE_ORIGIN_FILE = false
# API 前缀（所有接口路径的前缀）
# 接口前缀
VITE_GLOB_API_URL_PREFIX = /api
```
:::tip 代理目标地址
`VITE_PROXY` 当前默认指向 Laragon 虚拟主机 `http://admin.laravel13.naivevue/api`；使用 `php artisan serve` 时改为直连 `http://admin.laravel13.naivevue/api`（见 [2.2 Laragon 环境搭建](/zh/quickstart/laragon.html)）。修改后需重启 `pnpm dev`。
`VITE_PROXY` 是开发代理的唯一配置来源，当前值指向 Laragon 虚拟主机 `http://admin.laravel13.naivevue/api`（见 [2.2 Laragon 环境搭建](/zh/quickstart/laragon.html)）。修改后需重启 `pnpm dev` 生效。
:::
## 生产环境配置
@@ -65,34 +61,43 @@ VITE_GLOB_API_URL_PREFIX = /api
### `.env.production`
```bash
# 是否启用 Mock 数据
# 是否开启mock
VITE_USE_MOCK = false
# 公共基础路径（通常为 /，如部署到子目录则设为 /subdir/）
# 网站根目录
VITE_PUBLIC_PATH = /
# 是否删除 console
# 网站前缀
VITE_BASE_URL = /
# 是否删除console
VITE_DROP_CONSOLE = true
# API 接口基础路径（留空，由 Nginx 代理处理）
# API
VITE_GLOB_API_URL =
# 上传接口地址（留空，走同域）
VITE_GLOB_UPLOAD_URL=
# 图片上传地址
VITE_GLOB_UPLOAD_URL =
# 图片前缀地址（留空；跨域部署时配置 CDN/后端域名，与 FILE_DOMAIN_URL 一致）
VITE_GLOB_IMG_URL=
# 图片前缀地址
VITE_GLOB_IMG_URL =
# API 前缀
# 接口前缀
VITE_GLOB_API_URL_PREFIX = /api
# 构建压缩方式（当前默认 none；可选 gzip / brotli）
# 是否启用gzip压缩或brotli压缩
# 可选: gzip | brotli | none
# 如果你需要多种形式，你可以用','来分隔
VITE_BUILD_COMPRESS = 'none'
# 压缩后是否删除原文件
# 使用压缩时是否删除原始文件，默认为false
VITE_BUILD_COMPRESS_DELETE_ORIGIN_FILE = false
```
:::info 生产环境没有 VITE_PROXY
`VITE_PROXY` 仅在开发模式由 Vite dev server 使用；生产环境由 Nginx 反向代理 `/api`（见下方部署配置）。
:::
## 环境变量详解
### VITE_PORT — 开发服务器端口
@@ -120,10 +125,7 @@ VITE_BUILD_COMPRESS_DELETE_ORIGIN_FILE = false
### VITE_PROXY — 开发代理配置
```bash
# 当前 .env.development 中的值（Laragon 虚拟主机）
VITE_PROXY=[["/api","http://admin.laravel13.naivevue/api"]]
# 直连 artisan serve 时的写法
# .env.development 中的值（指向 Laragon 虚拟主机）
VITE_PROXY=[["/api","http://admin.laravel13.naivevue/api"]]
```
@@ -204,25 +206,29 @@ const fullApiUrl = apiUrl + apiPrefix; // 如 "/api" 或 "https://api.example.c
```typescript
// ui/vite.config.ts（摘自实际代码，节选）
export default defineConfig(({ mode }) => {
const env = loadEnv(mode, process.cwd());
// VITE_PROXY 容错处理：未配置时使用空代理
let VITE_PROXY: any = viteEnv.VITE_PROXY;
if (!VITE_PROXY) {
VITE_PROXY = '[[]]'; // 默认空代理
}
if (typeof VITE_PROXY === 'string') {
VITE_PROXY = JSON.parse(VITE_PROXY);
}
export default ({ command, mode }: ConfigEnv): UserConfig => {
const root = process.cwd();
const env = loadEnv(mode, root);
const viteEnv = wrapperEnv(env); // VITE_PROXY 在此由字符串 JSON.parse 为数组（见 build/utils.ts）
const { VITE_PUBLIC_PATH, VITE_PORT, VITE_GLOB_PROD_MOCK, VITE_PROXY } = viteEnv;
return {
base: VITE_PUBLIC_PATH,
server: {
proxy: createProxy(VITE_PROXY), // 见 build/vite/proxy.ts
host: true,
port: VITE_PORT, // 端口来自 .env.development 的 VITE_PORT
proxy: createProxy(VITE_PROXY), // 见 build/vite/proxy.ts
},
// ... 插件、路径别名等见 ui/vite.config.ts 全文
};
});
};
// ui/build/utils.ts —— wrapperEnv 中对 VITE_PROXY 做 JSON 解析
if (envName === 'VITE_PROXY') {
try {
realName = JSON.parse(realName);
} catch (error) {}
}
// ui/build/vite/proxy.ts —— 由 [前缀, 目标] 数组生成代理规则
export function createProxy(list: ProxyList = []) {
@@ -338,23 +344,27 @@ server {
## 多环境配置
### 测试 / UAT 环境（项目实际提供）
### 测试环境（项目实际提供）
```bash
# .env.test（pnpm build:test）
VITE_GLOB_API_URL =
VITE_GLOB_API_URL_PREFIX = /api
VITE_USE_MOCK = true
VITE_PUBLIC_PATH = /
VITE_BASE_URL = /
VITE_DROP_CONSOLE = true
# .env.uat（pnpm build:uat）同结构，按需调整
VITE_GLOB_API_URL =
VITE_GLOB_UPLOAD_URL =
VITE_GLOB_IMG_URL =
VITE_GLOB_API_URL_PREFIX = /api
VITE_BUILD_COMPRESS = 'none'
VITE_BUILD_COMPRESS_DELETE_ORIGIN_FILE = false
```
构建命令（见 `ui/package.json` scripts）：
```bash
pnpm build:test # 测试环境构建
pnpm build:uat # UAT 环境构建
pnpm build:prod # 生产环境构建
pnpm build:prod # 生产环境构建（与 pnpm build 等价）
```
### 环境变量对照表
@@ -362,12 +372,13 @@ pnpm build:prod # 生产环境构建
| 变量 | 开发 | 测试 | 生产 |
|------|------|------|------|
| `VITE_PORT` | 8001 | - | - |
| `VITE_BASE_URL` | / | / | / |
| `VITE_GLOB_API_URL` | 留空 | 留空 | 留空 |
| `VITE_GLOB_API_URL_PREFIX` | /api | /api | /api |
| `VITE_PROXY` | `[["/api","http://admin.laravel13.naivevue/api"]]` | - | - |
| `VITE_GLOB_IMG_URL` | 留空 | 留空 | 留空（按需配置 CDN） |
| `VITE_DROP_CONSOLE` | true | true | true |
| `VITE_USE_MOCK` | false | false | false |
| `VITE_USE_MOCK` | false | true | false |
## 常见问题
RXThinkCMF_Laravel13_NaiveVue/zh/quickstart/env-vars.md
+15 -12
View File
@@ -279,29 +279,32 @@ php artisan config:show jwt.secret # 查看解析后的配置值（调试
## 前端环境变量
前端使用 Vite 的环境变量机制，配置文件位于前端仓库目录：
前端使用 Vite 的环境变量机制，配置文件位于 `ui/` 目录（`.env`、`.env.development`、`.env.production`、`.env.test`）：
### `.env.development`（开发环境）
```bash
# API 接口基础路径（Vite 代理会将此路径的请求转发到后端）
VITE_GLOB_API_URL=/api
# 跨域代理（开发环境 /api 请求由此转发到后端）
VITE_PROXY=[["/api","http://admin.laravel13.naivevue/api"]]
# API 前缀（一般留空）
VITE_GLOB_API_URL_PREFIX=
# API 接口地址（留空，由 Vite 代理处理）
VITE_GLOB_API_URL =
# 是否启用 Mock 数据（false = 使用真实后端 API）
VITE_USE_MOCK=false
# 接口前缀
VITE_GLOB_API_URL_PREFIX = /api
# 是否开启mock（false = 使用真实后端 API）
VITE_USE_MOCK = false
```
### `.env.production`（生产环境）
```bash
# API 接口基础路径（生产环境的实际后端地址）
VITE_GLOB_API_URL=/api
# API 接口地址（留空，由 Nginx 代理处理）
VITE_GLOB_API_URL =
# API 前缀
VITE_GLOB_API_URL_PREFIX=
# 接口前缀
VITE_GLOB_API_URL_PREFIX = /api
```
在代码中访问环境变量：
@@ -312,4 +315,4 @@ VITE_GLOB_API_URL_PREFIX=
const apiUrl = import.meta.env.VITE_GLOB_API_URL
```
详细说明见 [2.4 前端服务启动](/zh/quickstart/frontend-start.html)。
详细说明见 [9.3 环境与构建配置](/zh/frontend/env-config.html)与 [2.4 前端服务启动](/zh/quickstart/frontend-start.html)。
RXThinkCMF_Laravel13_NaiveVue/zh/quickstart/frontend-start.md
+63 -50
View File
@@ -41,56 +41,69 @@ npm config set registry https://registry.npmmirror.com
### `.env.development`（开发环境）
```bash
# 服务端口
# 只在开发模式中被载入
VITE_PORT = 8001
# 公共基础路径
# 网站根目录
VITE_PUBLIC_PATH = /
# 代理配置（JSON 数组格式：[["前缀","目标地址"]]）
VITE_PROXY = [["/api","http://admin.laravel13.naivevue/api"]]
# 是否开启mock
VITE_USE_MOCK = false
# API 接口基础路径（留空，由代理处理）
# 网站前缀
VITE_BASE_URL = /
# 是否删除console
VITE_DROP_CONSOLE = true
# 跨域代理，可以配置多个，请注意不要换行
VITE_PROXY=[["/api","http://admin.laravel13.naivevue/api"]]
# API 接口地址
VITE_GLOB_API_URL =
# API 前缀
# 图片上传地址
VITE_GLOB_UPLOAD_URL =
# 图片前缀地址
VITE_GLOB_IMG_URL =
# 接口前缀
VITE_GLOB_API_URL_PREFIX = /api
# 上传接口地址
VITE_GLOB_UPLOAD_URL = /api/upload
# 图片访问地址（附件域名，对应后端 FILE_DOMAIN_URL）
VITE_GLOB_IMG_URL = http://file.laravel13.naivevue
# 是否启用 Mock 数据（false = 使用真实后端 API）
VITE_USE_MOCK = false
```
### `.env.production`（生产环境）
```bash
# 公共基础路径
# 是否开启mock
VITE_USE_MOCK = false
# 网站根目录
VITE_PUBLIC_PATH = /
# 是否在生产环境删除 console
# 网站前缀
VITE_BASE_URL = /
# 是否删除console
VITE_DROP_CONSOLE = true
# API 接口基础路径（留空，由 Nginx 代理处理）
# API
VITE_GLOB_API_URL =
# API 前缀
# 图片上传地址
VITE_GLOB_UPLOAD_URL =
# 图片前缀地址
VITE_GLOB_IMG_URL =
# 接口前缀
VITE_GLOB_API_URL_PREFIX = /api
# 上传接口地址
VITE_GLOB_UPLOAD_URL = /api/upload
# 是否启用gzip压缩或brotli压缩
# 可选: gzip | brotli | none
VITE_BUILD_COMPRESS = 'none'
# 图片访问地址
VITE_GLOB_IMG_URL = https://file.example.com
# 是否启用 gzip 压缩
VITE_BUILD_COMPRESS = gzip
# 压缩后是否删除原文件
# 使用压缩时是否删除原始文件，默认为false
VITE_BUILD_COMPRESS_DELETE_ORIGIN_FILE = false
```
@@ -109,7 +122,7 @@ npm run dev
启动成功后会看到：
```text
VITE v3.2.x ready in 1234 ms
VITE v5.4.x ready in 1234 ms
➜ Local: http://localhost:8001/
➜ Network: http://192.168.1.100:8001/
@@ -117,31 +130,32 @@ npm run dev
## 步骤四：配置 API 代理
开发环境下，前端通过 Vite 代理将 `/api` 请求转发到后端服务。
在 `vite.config.ts` 中配置代理：
开发环境下，前端通过 Vite 代理将 `/api` 请求转发到后端服务。代理规则由 `.env.development` 的 `VITE_PROXY` 驱动，`vite.config.ts` 只负责调用 `createProxy`：
```typescript
// ui/vite.config.ts
server: {
port: 8001, // 开发服务器端口（对应 VITE_PORT）
proxy: {
'/api': {
target: 'http://admin.laravel13.naivevue/api', // 后端服务地址（对应 VITE_PROXY）
changeOrigin: true, // 开启跨域（修改请求头的 Origin）
rewrite: (path) => path, // 保持路径不变（不做路径替换）
},
},
}
host: true,
port: VITE_PORT, // 端口来自 VITE_PORT（8001）
proxy: createProxy(VITE_PROXY), // 解析 VITE_PROXY 生成代理规则
},
```
后端使用虚拟域名时（见 [2.2 Laragon 环境搭建](/zh/quickstart/laragon.html)），target 改为对应地址：
`build/vite/proxy.ts` 为每个 `[前缀, 目标]` 生成一条代理规则：
```typescript
target: 'http://admin.laravel13.naivevue/api',
// createProxy 由 VITE_PROXY = [["/api","http://admin.laravel13.naivevue/api"]] 生成
'/api': {
target: 'http://admin.laravel13.naivevue/api', // 后端地址（Laragon 虚拟主机，见 2.2 Laragon 环境搭建）
changeOrigin: true, // 修改请求头的 Origin
ws: true, // 支持 WebSocket
rewrite: (path) => path.replace(new RegExp('^/api'), ''), // 去掉 /api 前缀再转发
},
```
确保后端服务已启动（`php artisan serve`），然后访问 `http://localhost:8001`。
需要切换后端地址时，直接修改 `.env.development` 中的 `VITE_PROXY`（改完重启 `pnpm dev` 生效），无需改动 `vite.config.ts`。
确保后端服务已启动（见 [2.3 后端服务启动](/zh/quickstart/backend-start.html)），然后访问 `http://localhost:8001`。
## 步骤五：验证前后端联调
@@ -192,12 +206,11 @@ pnpm install
### 2. 端口 8001 被占用
修改 `.env.development` 中的 `VITE_PORT` 或 `vite.config.ts` 中的 `server.port`：
修改 `.env.development` 中的 `VITE_PORT`（`vite.config.ts` 的 `server.port` 由它驱动），改完重启 `pnpm dev`：
```typescript
server: {
port: 8002, // 改为其他端口（如 8002、8003 等）
}
```bash
# .env.development
VITE_PORT = 8002 # 改为其他端口（如 8002、8003 等）
```
### 3. API 请求 404
@@ -210,7 +223,7 @@ curl http://admin.laravel13.naivevue/api/captcha
# → {"code":0,...} 即后端正常
```
再检查 `vite.config.ts` 中 `proxy.target` 是否指向后端实际地址（改完需重启 `pnpm dev`）。
再检查 `.env.development` 中 `VITE_PROXY` 的目标地址是否指向后端实际地址（改完需重启 `pnpm dev`）。
### 4. 登录报 401