xr-example

基于 Vue 3 + TypeScript + Vite 的前端工程，用于对接 4C/4J 环境接口进行本地开发与调试。

安装依赖（pnpm）

项目已包含 pnpm-lock.yaml，建议使用 pnpm 安装依赖：

pnpm install

环境变量

环境变量主要分为 .env（基础公共变量）以及针对不同环境的 .env.development 和 .env.production。

通用环境变量位于 .env，当前关键配置如下：

• VITE_APP_PLAT_TYPE = '4J'：应用类型（4C / 4J）
• VITE_APP_NAME = '<your-app-name>'：子应用名字（4J 环境为应用名）

开发环境变量位于 .env.development，当前关键配置如下：

• VITE_APP_NODE_ENV = 'development'
• VITE_APP_BASE_API = ''：本地测试 API 地址。当为空时，Vite 会自动推断为 http://localhost:<启动端口>/，解决 4J 联调时的跨域前缀问题。
• VITE_APP_4J_BASE_API = 'http://localhost:8080/'：4J 环境本地后端服务地址，开发服务器（proxy）会将匹配到的请求代理到此地址。
• VITE_APP_RESOURCE_API = 'http://<resource-host>/'：模块联邦资源路径（4J 环境需要）
• VITE_APP_LANG = 'zh_Hans'：语言（zh_Hans / en / ar）
• VITE_APP_SIMULATE_THEME = 'default'：本地开发默认模拟主题
• VITE_APP_USER_ID = '<your-user-id>'：4J 环境本地测试用户名
• VITE_APP_COMPANY_CODE = '<your-company-code>'：本地开发默认账套
• VITE_APPLICATION_NAME = '<your-app-name>'：本地开发测试默认子系统名（4J 环境为应用名）

本地启动（serve）

项目 package.json 中的 serve 脚本为：

pnpm dev --host

其中 dev 脚本为：

vite --port 5173

因此本地启动建议使用：

pnpm serve

启动后默认端口为 5173。由于 serve 追加了 --host，会监听到局域网地址，便于其他机器联调。

访问方式

启动后可通过以下方式访问：

• 本机：http://localhost:5173/
• 局域网：终端输出的 Network 地址（取决于当前网卡 IP）

常用命令

# 本地开发（推荐）
pnpm serve

# 构建（包含类型检查）
pnpm build

# 预览构建产物
pnpm preview

IDE 建议

• VS Code + Volar（并禁用 Vetur）