泰安市网站建设_网站建设公司_留言板_seo优化

社区智慧共享资源管理系统 - 部署和运行文档

环境要求

最低系统要求

• 操作系统: Windows 10/11, macOS 10.15+, Linux Ubuntu 18.04+
• Node.js: 版本 16.0.0 或更高
• npm: 版本 7.0.0 或更高（推荐使用 yarn）
• 内存: 至少 4GB RAM
• 磁盘空间: 至少 1GB 可用空间

推荐开发环境

• Node.js: 18.x LTS 版本
• 包管理器: yarn 1.22+ 或 npm 8+
• 编辑器: VS Code 或 WebStorm
• 浏览器: Chrome 90+, Firefox 88+, Safari 14+

安装步骤

1. 环境准备

安装 Node.js

1. 访问 Node.js官网 下载LTS版本
2. 运行安装程序，按默认选项安装
3. 验证安装是否成功：

node --version
npm --version

可选：安装 yarn（推荐）

npm install -g yarn

2. 项目初始化

克隆或下载项目

如果项目是通过版本控制获取：

git clone <项目仓库地址>
cd BS源代码

如果项目是本地文件：

cd "c:\Users\yangsongduo\Desktop\20234152杨松铎\人机交互实验报告\BS源代码"

安装项目依赖

使用 npm：

npm install

或使用 yarn（推荐）：

yarn install

依赖安装说明

• 安装过程会自动下载所有必要的依赖包
• 依赖信息保存在 package.json 文件中
• 安装完成后会生成 node_modules 目录
• 首次安装可能需要几分钟时间

开发环境运行

启动开发服务器

# 使用 npm
npm run dev# 使用 yarn  
yarn dev

开发服务器特性

• 端口: 默认使用 5173 端口
• 热重载: 支持代码修改后自动刷新
• 控制台输出: 显示编译状态和错误信息
• 网络访问: 支持局域网内其他设备访问

访问应用

在浏览器中打开：

http://localhost:5173

开发工具使用

浏览器开发者工具

• 按 F12 打开开发者工具
• 使用 Elements 面板检查DOM结构
• 使用 Console 面板查看日志和错误
• 使用 Network 面板监控网络请求

VS Code 调试配置（可选）

创建 .vscode/launch.json 文件：

{"version": "0.2.0","configurations": [{"name": "Launch Chrome","request": "launch","type": "node","program": "${workspaceFolder}/node_modules/vite/bin/vite.js","args": ["--port", "5173"],"runtimeArgs": ["--inspect-brk"],"port": 9229,"console": "integratedTerminal","internalConsoleOptions": "neverOpen"}]
}

构建生产版本

构建命令

# 使用 npm
npm run build# 使用 yarn
yarn build

构建输出

• 生成 dist 目录包含构建后的文件
• 文件经过压缩和优化
• 包含哈希值的文件名用于缓存控制
• 自动生成 source map 文件用于调试

构建文件结构

dist/
├── assets/
│   ├── index.[hash].js        # 主JavaScript文件
│   ├── index.[hash].css       # 主样式文件
│   └── [其他资源文件]
├── index.html                 # 入口HTML文件
└── vite.svg                  # 静态资源

预览构建结果

本地预览

# 使用 npm
npm run preview# 使用 yarn
yarn preview

预览特性

• 启动静态文件服务器
• 模拟生产环境运行
• 检查构建结果是否正确
• 端口通常为 4173

访问预览

http://localhost:4173

代码质量检查

ESLint 代码检查

# 使用 npm
npm run lint# 使用 yarn
yarn lint

检查规则

• JavaScript/JSX 语法检查
• React Hooks 使用规范
• 代码格式一致性
• 未使用代码检测

自动修复（可选）

# 使用 npm
npm run lint -- --fix# 使用 yarn
yarn lint --fix

部署到生产环境

1. 静态文件部署

Nginx 配置示例

server {listen 80;server_name your-domain.com;root /var/www/community-resource-mis;index index.html;# 处理前端路由location / {try_files $uri $uri/ /index.html;}# 静态资源缓存location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg)$ {expires 1y;add_header Cache-Control "public, immutable";}
}

Apache 配置示例

<VirtualHost *:80>ServerName your-domain.comDocumentRoot /var/www/community-resource-mis<Directory "/var/www/community-resource-mis">Options -IndexesAllowOverride AllRequire all granted</Directory># 重写规则处理前端路由RewriteEngine OnRewriteCond %{REQUEST_FILENAME} !-fRewriteCond %{REQUEST_FILENAME} !-dRewriteRule . /index.html [L]
</VirtualHost>

2. CDN 部署

上传到对象存储

1. 将 dist 目录上传到云存储（如 AWS S3、阿里云 OSS）
2. 配置静态网站托管
3. 绑定自定义域名
4. 配置 HTTPS 证书

CDN 加速配置

• 配置缓存策略
• 启用 Gzip 压缩
• 设置安全头信息
• 配置域名解析

3. 容器化部署（可选）

Dockerfile 示例

# 多阶段构建
FROM node:18-alpine AS builder
WORKDIR /app
COPY package*.json ./
RUN npm ci --only=production
COPY . .
RUN npm run build# 生产镜像
FROM nginx:alpine
COPY --from=builder /app/dist /usr/share/nginx/html
COPY nginx.conf /etc/nginx/nginx.conf
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]

docker-compose.yml 示例

version: '3.8'
services:community-resource-mis:build: .ports:- "80:80"environment:- NODE_ENV=productionrestart: unless-stopped

环境变量配置

开发环境变量

创建 .env.development 文件：

VITE_API_BASE_URL=http://localhost:3000/api
VITE_APP_TITLE=社区智慧共享资源管理系统（开发版）
VITE_DEBUG=true

生产环境变量

创建 .env.production 文件：

VITE_API_BASE_URL=https://api.your-domain.com/api
VITE_APP_TITLE=社区智慧共享资源管理系统
VITE_DEBUG=false

在代码中使用环境变量

const apiBaseUrl = import.meta.env.VITE_API_BASE_URL
const appTitle = import.meta.env.VITE_APP_TITLE

故障排除

常见问题及解决方案

1. 端口被占用

# 查找占用端口的进程
netstat -ano | findstr :5173# 终止进程（Windows）
taskkill /PID <进程ID> /F# 或者使用其他端口
npm run dev -- --port 3000

2. 依赖安装失败

# 清除缓存重新安装
npm cache clean --force
rm -rf node_modules package-lock.json
npm install

3. 构建失败

# 检查Node.js版本
node --version# 更新依赖版本
npm update# 或者删除node_modules重新安装
rm -rf node_modules
npm install

4. 热重载不工作

• 检查浏览器控制台错误信息
• 确认文件保存编码为UTF-8
• 尝试重启开发服务器
• 检查防火墙设置

日志分析

开发服务器日志

• 编译错误：显示在控制台红色文本
• 警告信息：黄色文本，需要关注
• 网络请求：在Network面板查看

构建日志

• 文件大小分析：显示各模块大小
• 压缩效果：显示压缩前后大小对比
• 警告信息：需要处理的潜在问题

性能优化建议

开发阶段优化

1. 代码分割: 使用React.lazy进行路由级代码分割
2. 图片优化: 使用WebP格式，适当压缩
3. 第三方库: 按需引入，避免全量引入
4. 缓存策略: 合理配置浏览器缓存

生产环境优化

1. CDN加速: 使用CDN分发静态资源
2. Gzip压缩: 启用服务器端Gzip压缩
3. HTTP/2: 使用HTTP/2协议提升性能
4. 监控分析: 集成性能监控工具

更新和维护

依赖更新

# 检查过时的依赖
npm outdated# 更新所有依赖（谨慎操作）
npm update# 更新特定依赖
npm update <package-name># 使用npm-check-updates工具
npx npm-check-updates -u
npm install

版本管理

• 使用Git进行版本控制
• 遵循语义化版本规范
• 定期创建发布标签
• 维护更新日志

---

文档生成时间: 2024-12-28
最后更新: 2024-12-28
适用版本: 0.0.0