# 通用企业官网程序 基于 Nuxt 4 + Vue 3 + TypeScript 的企业官网纯前端展示系统。 ## 项目定位 - 本项目仅包含官网前台展示代码 - 不含后端管理端,所有数据通过调用 SaaS 后端 API 获取 - 支持多模板切换、多租户、独立域名绑定、订阅过期校验 ## 目录结构 ``` website/ ├── app/ # 应用代码 │ ├── components/ # 公共组件 │ ├── composables/ # 组合式函数 │ ├── layouts/ # 布局 │ ├── pages/ # 页面路由 │ ├── templates/ # 模板集合 │ ├── types/ # TS 类型 │ ├── utils/ # 工具函数 │ └── assets/ # 样式资源 ├── server/ # Nuxt Server │ ├── api/ # API 代理 │ ├── middleware/ # 中间件 │ └── utils/ # 服务端工具 ├── scripts/ # 脚本 └── templates/cloud-website # 模板预览图 ``` ## 安装依赖 ```bash npm install ``` ## 本地开发 ```bash npm run dev ``` 默认访问:http://localhost:3000 ## 环境变量与打包 项目已按环境拆分配置文件,**打生产包不再需要手改 `.env`**: | 命令 | 用途 | 读取的配置 | |---|---|---| | `npm run dev` | 本地开发 | `.env.development` | | `npm run build:prod` | 生产打包 | `.env.production` | | `npm run build` | 等同 `build:prod` | `.env.production` | | `npm run build:dev` | 用开发配置打包(排查用) | `.env.development` | | `npm run dev:prod` | 以生产配置本地起服务(排查用) | `.env.production` | 配置文件说明: | 文件 | 是否提交 | 说明 | |---|---|---| | `.env.development` | ✅ | 团队共享的开发配置,接口指向本地后端 | | `.env.production` | ✅ | 团队共享的生产配置,接口指向线上 | | `.env.example` | ✅ | 变量总览模板,新增变量时同步更新 | | `.env.local` | ❌ | 个人通用覆盖 | | `.env.<环境>.local` | ❌ | 个人针对某环境的覆盖,优先级最高 | | `.env` | ❌ | 历史遗留的个人配置,优先级最低 | 优先级(高 → 低): **进程环境变量 > `.env.<环境>.local` > `.env.<环境>` > `.env.local` > `.env`** 只有「变量尚未定义」时才会被下一层填充,因此高优先级不会被低优先级顶掉, `.env` 里残留的本地地址也不会再污染生产包。 发布前可自查产物是否干净: ```bash grep -rl "127.0.0.1" .output/ || echo "产物干净,无本地地址" ``` ## 模板系统 模板存放在 `app/templates/` 目录下,每个模板独立目录,包含: - `config.ts`:模板配置 - `components/`:模板私有组件(Header、Footer 等) - `pages/`:模板页面组件 - `theme.css`:模板主题变量 当前已实现: - `template-01`:科技蓝企业模板(完整) - `template-02` ~ `template-04`:占位模板,后续根据设计稿实现 ## 环境变量清单 完整变量说明见 `.env.example`。核心变量: ```bash # 租户 / 模板(生产留空,由域名自动识别) NUXT_PUBLIC_TENANT_ID= NUXT_PUBLIC_APP_ID=website NUXT_PUBLIC_TEMPLATE_ID= # 接口地址 NUXT_PUBLIC_SERVER_API_BASE=https://server.websoft.top/api NUXT_PUBLIC_MODULES_API_BASE=https://hjc-api.websoft.top/api NUXT_PUBLIC_APP_API_BASE=https://websopy-api.websoft.top # 多租户域名 NUXT_PUBLIC_BASE_DOMAINS=shoplnk.cn,sitelink.cn,wsdns.cn ``` > ℹ️ `nuxt.config.ts` 内置的 `NUXT_PUBLIC_MODULES_API_BASE` 默认值已统一为 > `https://hjc-api.websoft.top/api`(原 `cms-api.websoft.top` 域名 `/api/*` 已返回 404, > 故全面切换到 `hjc-api`)。`.env.production` 中也显式指定同一地址。 > 若将来再次更换域名,请同步修改 `nuxt.config.ts`、`.env.production` 与 `.env.example`。 ## 接口说明 本项目通过 `server/api/` 代理转发 SaaS 后端接口,前端不直接调用后端地址。 核心接口: - `GET /api/site/info`:站点信息 - `GET /api/page/all`:页面列表 - `GET /api/page/detail?slug=xxx`:页面详情 - `GET /api/article/list`:文章列表 - `GET /api/product/list`:产品列表 - `GET /api/case/list`:案例列表 - `GET /api/subscription/status`:订阅状态 - `GET /api/sitemap.xml`:动态站点地图 - `GET /api/robots.txt`:robots 文件 - `POST /api/form/submit`:表单提交 ## 部署 ```bash npm run build npm run preview ``` 生产环境建议使用 Nginx 反向代理,配置泛域名 `*.shoplnk.cn` 指向 Nuxt 服务。 ## 注意事项 - 模板组件为动态导入,新增模板后需在 `app/templates/index.ts` 注册 - 域名绑定查询接口 `/cms/cms-website/resolveDomain` 需 SaaS 后端实现 - 订阅状态接口 `/api/app/subscription/check` 需 SaaS 后端实现