着陆页项目镜像文档

镜像概述

本镜像为基于Vue.js构建的着陆页（Landing page）前端项目，集成完整的开发与部署工具链。通过Yarn包管理工具提供项目初始化、开发热重载、生产构建、代码检查等核心能力，支持通过环境变量灵活配置API服务地址，满足不同环境（开发、测试、生产）的前端页面部署需求。

核心功能与特性

• 开发环境支持：提供热重载编译功能，代码修改后实时更新页面，提升开发效率
• 生产构建优化：支持生产环境代码压缩、混淆与静态资源优化，生成高性能部署文件
• 代码质量保障：集成代码检查与自动修复工具，确保代码符合规范
• 环境变量配置：通过VUE_APP_API_BASE_URL和VUE_APP_CONTENT_API_BASE_URL环境变量动态配置API服务基础URL
• 跨环境兼容性：支持开发、测试、生产等多场景的灵活部署与配置切换

使用场景与适用范围

• 前端开发团队进行着陆页界面的开发与调试
• 需要快速将着陆页部署到生产环境的场景
• 对API服务地址有环境隔离需求的前端项目
• 需自动化构建流程的前端开发与部署链路

使用方法与配置说明

项目初始化

首次使用时需安装项目依赖：

yarn install

开发环境编译与热重载

启动开发服务器，支持代码热重载（修改代码实时更新页面）：

yarn serve

如需连接生产服务器API进行开发调试，可通过环境变量指定API地址：

VUE_APP_API_BASE_URL=[***] VUE_APP_CONTENT_API_BASE_URL=[***] yarn serve

生产环境编译与构建

生成生产环境优化后的静态资源（输出至dist目录）：

yarn build

标准生产环境构建命令（使用指定生产API服务地址）：

VUE_APP_API_BASE_URL=[***] VUE_APP_CONTENT_API_BASE_URL=[***] yarn build

代码检查与修复

对项目文件进行代码规范检查，并自动修复部分问题：

yarn lint

配置自定义

项目配置详情可参考Vue CLI***文档：Configuration Reference

环境变量说明

Docker部署示例

开发环境部署

使用Node镜像运行开发服务器（需挂载本地项目目录）：

docker run -it --rm -v $(pwd):/app -w /app node:latest \
  sh -c "yarn install && \
         VUE_APP_API_BASE_URL=[***] \
         VUE_APP_CONTENT_API_BASE_URL=[***] \
         yarn serve"

生产环境部署

1. 构建生产静态资源：

docker run -it --rm -v $(pwd):/app -w /app node:latest \
  sh -c "yarn install && \
         VUE_APP_API_BASE_URL=[***] \
         VUE_APP_CONTENT_API_BASE_URL=[***] \
         yarn build"

2. 使用Nginx部署构建产物：

docker run -d -p 80:80 -v $(pwd)/dist:/usr/share/nginx/html nginx:alpine

自定义配置参考

详细配置可参考Vue CLI***文档：Configuration Reference