96 lines
2.2 KiB
Markdown
96 lines
2.2 KiB
Markdown
# IT工具合集网站 - 构建和部署说明
|
||
|
||
## 概述
|
||
|
||
本项目是一个IT工具合集网站，使用HTML、CSS和JavaScript构建。项目使用Node.js管理构建过程，但最终生成的是纯静态网站，可以部署到任何Web服务器（如nginx）。
|
||
|
||
## 开发环境
|
||
|
||
### 环境要求
|
||
|
||
- Node.js 14.x或更高版本
|
||
- npm 6.x或更高版本
|
||
|
||
### 安装依赖
|
||
|
||
```bash
|
||
npm install
|
||
```
|
||
|
||
### 本地开发服务器
|
||
|
||
```bash
|
||
npm run dev
|
||
```
|
||
|
||
这将启动一个本地开发服务器，通常在 http://localhost:3000 访问。
|
||
|
||
## 构建项目
|
||
|
||
要构建可部署的静态网站，运行：
|
||
|
||
```bash
|
||
npm run build
|
||
```
|
||
|
||
构建过程将：
|
||
1. 清理dist目录
|
||
2. 复制所有必要的文件到dist目录
|
||
3. 生成预设的统计数据文件
|
||
4. 创建简单的README文件
|
||
|
||
构建完成后，所有静态文件将位于`dist`目录中。
|
||
|
||
## 部署到Nginx
|
||
|
||
1. 将构建生成的`dist`目录中的所有文件上传到您的Web服务器
|
||
|
||
2. 配置Nginx
|
||
- 参考项目根目录下的`nginx.conf.example`文件
|
||
- 根据您的服务器环境修改配置
|
||
- 确保`root`指向上传文件的目录
|
||
|
||
示例Nginx配置：
|
||
```nginx
|
||
server {
|
||
listen 80;
|
||
server_name your-domain.com;
|
||
root /path/to/your/website/dist;
|
||
index index.html;
|
||
|
||
# 优化静态资源缓存
|
||
location ~* \.(jpg|jpeg|png|gif|ico|css|js)$ {
|
||
expires 30d;
|
||
add_header Cache-Control "public, no-transform";
|
||
}
|
||
|
||
# 其他配置...
|
||
}
|
||
```
|
||
|
||
3. 重启Nginx服务
|
||
```bash
|
||
sudo systemctl restart nginx
|
||
```
|
||
|
||
## 统计数据说明
|
||
|
||
本项目的统计数据（访问人数、使用次数）使用浏览器的localStorage存储，对每个用户都是独立的。这意味着：
|
||
|
||
1. 每个用户看到的统计数据是基于他们自己的浏览器
|
||
2. 统计数据在浏览器清除数据后会重置
|
||
3. 不同设备的同一用户会看到不同的统计数据
|
||
|
||
## 自定义默认统计数据
|
||
|
||
如果您想修改默认的统计数据，可以编辑`build.js`文件中的`presetStats`对象：
|
||
|
||
```javascript
|
||
const presetStats = {
|
||
visitorCount: 1254, // 自定义访问人数初始值
|
||
usageCount: 5840, // 自定义使用次数初始值
|
||
lastVisit: 0
|
||
};
|
||
```
|
||
|
||
修改后重新构建项目即可。 |