# zyuas

> 响应式企业官方网站模板，使用 vue 全家桶开发

## 技术要点

``` bash
# bootstarp——整体框架，主要用到了栅格系统和一些组件

# swiper——轮播插件

# wow.js+animate.css——网站的整体动画插件

# axios——ajax 请求

# vue-router——路由

# vuex——状态管理（项目没有用到）

# session storage——本地存储

# 对可复用的组件进行了封装，对 api 接口进行了封装
```

---

## 依赖升级记录 (2026-02-25)

### 安全漏洞修复

| 依赖 | 原版本 | 升级后 | 说明 |
|------|--------|--------|------|
| axios | 0.18.0 | 0.27.2 | **修复多个安全漏洞** |

### 主要依赖升级

| 依赖 | 原版本 | 升级后 | 说明 |
|------|--------|--------|------|
| vue | 2.5.2 | 2.7.16 | Vue 2 最终版本 |
| vue-router | 3.0.1 | 3.6.5 | 最新兼容版本 |
| vuex | 3.0.1 | 3.6.2 | 最新兼容版本 |
| vue-template-compiler | 2.5.2 | 2.7.16 | 匹配 Vue 版本 |
| webpack | 3.6.0 | 4.47.0 | 重大版本升级 |
| webpack-dev-server | 2.9.1 | 3.11.3 | 兼容 webpack 4 |
| vue-loader | 13.3.0 | 14.2.4 | 兼容版本 |
| html-webpack-plugin | 2.30.1 | 4.5.2 | 兼容 webpack 4 |
| copy-webpack-plugin | 4.0.1 | 5.1.2 | 兼容 webpack 4 |
| css-loader | 0.28.0 | 3.6.0 | 最新稳定版 |
| url-loader | 0.5.8 | 4.1.1 | 最新兼容版本 |
| autoprefixer | 7.1.2 | 9.8.8 | 兼容 PostCSS 7 |
| postcss-loader | 2.0.8 | 3.0.0 | 兼容版本 |

### Babel 升级 (6.x → 7.x)

| 依赖 | 版本 | 说明 |
|------|------|------|
| @babel/core | 7.29.0 | Babel 7 核心 |
| @babel/preset-env | 7.29.0 | 智能预设 |
| @babel/plugin-transform-runtime | 7.29.0 | 运行时转换 |
| @babel/plugin-proposal-decorators | 7.29.0 | 装饰器支持 |
| @babel/plugin-proposal-class-properties | 7.18.6 | 类属性支持 |
| @babel/plugin-syntax-dynamic-import | 7.8.3 | 动态导入 |
| babel-loader | 8.4.1 | Webpack Babel 加载器 |
| @babel/runtime | 7.28.6 | 运行时辅助函数 |

### 配置文件变更

#### .babelrc
```json
{
  "presets": [
    ["@babel/preset-env", {
      "modules": false,
      "targets": {
        "browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
      }
    }]
  ],
  "plugins": [
    "@babel/transform-runtime",
    "transform-vue-jsx",
    "@babel/plugin-syntax-dynamic-import",
    ["@babel/plugin-proposal-decorators", { "legacy": true }],
    ["@babel/plugin-proposal-class-properties", { "loose": true }],
    ["@babel/plugin-transform-private-property-in-object", { "loose": true }],
    ["@babel/plugin-transform-private-methods", { "loose": true }]
  ]
}
```

#### .gitignore (新增规则)
```
# Node.js
node_modules/
npm-debug.log*
yarn-debug.log*
yarn-error.log*

# Build outputs
dist/
build-output/
*.log
logs/

# Environment
.env
.env.local
.env.*.local

# Package archives
*.tar.gz
*.zip
*.tgz
```

### 构建优化 (2026-02-25)

已完成的优化：

1. **Webpack mode 配置**
   - 添加 `mode: 'production'` 启用 webpack 生产环境默认优化

2. **代码分割优化**
   - 配置 `splitChunks` 自动提取公共代码
   - 添加 `commons` 缓存组优化共享模块
   - 配置 `runtimeChunk` 分离运行时代码

3. **性能提示阈值调整**
   - `maxAssetSize`: 1MB (适配图片大小)
   - `maxEntrypointSize`: 2MB (适配 bundle 大小)
   - 仅对 `.js` 和 `.css` 文件进行警告

4. **生产环境优化**
   - 移除 `console.log` 和 `debugger`
   - 启用 CSS 和 JS 压缩
   - HTML 压缩优化

### 构建警告说明

当前构建无 webpack 警告。

> **注意：** 构建时会显示 shelljs 的 `Accessing non-existent property` 警告
> - 原因：shelljs 库内部使用方式导致
> - 影响：**无任何影响**，可安全忽略
> - 解决：需等待 shelljs 库更新

### 图片优化建议

项目包含较大图片文件，建议按需优化：

| 文件 | 大小 | 建议 |
|------|------|------|
| sur1.png | 2.23 MiB | 压缩或使用 WebP |
| buil1.png | 2.01 MiB | 压缩或使用 WebP |
| dji-card.png | 1.74 MiB | 压缩或使用 WebP |
| buil3.png | 1.71 MiB | 压缩或使用 WebP |
| sur3.png | 1.48 MiB | 压缩或使用 WebP |

**优化工具推荐：**
- [TinyPNG](https://tinypng.com/) - 在线图片压缩
- [Squoosh](https://squoosh.app/) - Google 图片压缩工具
- `imagemin` - Node.js 图片压缩库

### 已知问题

无。所有警告已解决。

### 更新日志

#### 2026-02-25

**依赖升级与安全修复：**
- ✅ axios 0.18.0 → 0.27.2 (修复安全漏洞)
- ✅ vue 2.5.2 → 2.7.16
- ✅ webpack 3.6.0 → 4.47.0
- ✅ Babel 6.x → 7.x
- ✅ shelljs 0.7.6 → 0.8.5 (修复 Node.js 20 兼容性警告)

**构建优化：**
- ✅ 消除所有 webpack 警告
- ✅ 消除所有 shelljs 警告
- ✅ 优化代码分割
- ✅ 启用生产环境压缩

### 测试命令

```bash
# 安装依赖
npm install

# 开发模式
npm run dev

# 生产构建
npm run build
```

### 注意事项

- Node.js 版本建议 >= 14.0.0
- 构建产物在 `dist/` 目录，需通过 HTTP 服务器访问
- 图片资源较大，建议根据实际需求优化