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

构建警告说明

当前构建存在以下警告（不影响功能）：

1. 文件大小警告 - 部分图片文件超过 244 KiB 建议值
   • static/img/sur1.png (2.23 MiB)
   • static/img/dji-card.png (1.74 MiB)
   • static/img/buil1.png (2.01 MiB)
   • 等...
     

优化建议：

• 使用图片压缩工具（如 TinyPNG）
• 考虑使用 WebP 格式
• 对大图片使用 CDN 加速

1. 入口文件大小 - 主入口文件总大小 567 KiB
   

优化建议：

• 启用代码分割（已配置 splitChunks）
• 懒加载路由组件
• 提取公共代码

已知问题

1. shelljs 警告 - Accessing non-existent property 警告

   • 原因：shelljs 内部使用
   • 影响：无，可安全忽略

2. Babel loose 模式 - 已通过配置统一 loose 模式解决

测试命令

# 安装依赖
npm install

# 开发模式
npm run dev

# 生产构建
npm run build

注意事项

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