zyuas.com

zyuas

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

技术要点

# 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

{
  "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 - 在线图片压缩
• Squoosh - 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 警告
• ✅ 优化代码分割
• ✅ 启用生产环境压缩

测试命令

# 安装依赖
npm install

# 开发模式
npm run dev

# 生产构建
npm run build

注意事项

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