gxwebsoft
2b69686795
- 新增404页面，优化未找到页面体验，避免被搜索引擎索引 - 增加文件代理接口，隐藏真实文件服务器地址，支持文件请求代理 - 实现/article、/case、/product及/page动态路由兼容列表与详情展示 - 添加动态CMS页面兼容入口处理旧式路径，统一路由与SEO设置 - 新增模板1、模板7、模板2、模板3关于我们页面，实现多模板支持 - 模板增强支持CMS单页内容加载及SEO信息动态设置 - 配置环境变量及Git忽略文件规则辅助开发和构建环境管理
103 lines
2.9 KiB
Markdown
103 lines
2.9 KiB
Markdown
# 通用企业官网程序
|
||
|
||
基于 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
|
||
|
||
## 模板系统
|
||
|
||
模板存放在 `app/templates/` 目录下，每个模板独立目录，包含：
|
||
|
||
- `config.ts`：模板配置
|
||
- `components/`：模板私有组件（Header、Footer 等）
|
||
- `pages/`：模板页面组件
|
||
- `theme.css`：模板主题变量
|
||
|
||
当前已实现：
|
||
- `template-01`：科技蓝企业模板（完整）
|
||
- `template-02` ~ `template-04`：占位模板，后续根据设计稿实现
|
||
|
||
## 环境变量
|
||
|
||
复制 `.env.example` 为 `.env`，按需修改：
|
||
|
||
```bash
|
||
NUXT_PUBLIC_TENANT_ID=10398
|
||
NUXT_PUBLIC_APP_ID=website
|
||
NUXT_PUBLIC_TEMPLATE_ID=template-01
|
||
NUXT_PUBLIC_SERVER_API_BASE=https://server.websoft.top/api
|
||
NUXT_PUBLIC_MODULES_API_BASE=https://cms-api.websoft.top/api
|
||
NUXT_PUBLIC_APP_API_BASE=https://cms-api.websoft.top
|
||
NUXT_PUBLIC_BASE_DOMAIN=shoplnk.cn
|
||
```
|
||
|
||
## 接口说明
|
||
|
||
本项目通过 `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 后端实现
|