https://he.uy web前端博客 zh-CN Mon, 13 Apr 2026 10:37:26 GMT https://he.uy/posts/25 https://he.uy/posts/25 Sat, 19 Apr 2025 23:13:52 GMT Vue CLI构建时使用非production模式可能导致代码压缩但混淆失效，即使配置了NODE_ENV=production。问题根源在于--mode参数会影响Webpack默认优化行为。解决方案是结合dotenv-cli工具加载环境变量文件，同时明确指定--mode production参数，确保Vue CLI启用完整生产优化。通过vue inspect命令可验证最终Webpack配置，该方法兼顾环境变量加载与代码混淆功能。 https://he.uy/posts/24 https://he.uy/posts/24 Wed, 13 Dec 2023 16:42:09 GMT 使用Docker部署Jenkins并配置GitLab自动化部署流程。通过安装Node.js与Go环境插件，设置Git仓库连接及分支监控，实现代码推送自动触发构建。构建环节配置Shell脚本执行npm安装与打包，利用Publish over SSH插件将产物传输至远程服务器，并执行文件替换等后续操作。整个过程涵盖环境准备、插件配置、触发器设置及跨服务器部署等关键步骤。 https://he.uy/posts/23 https://he.uy/posts/23 Mon, 05 Jun 2023 18:34:15 GMT Vite相比Webpack具备更快的启动速度和热更新效率，配置过程更为简洁。基础配置包括创建项目目录、安装依赖、设置HTML入口和配置文件。支持CSS预处理器和PostCSS插件，可自动添加浏览器前缀并实现移动端适配。集成Vue和TypeScript需安装对应插件，配合类型检查提升代码规范。环境变量通过.env文件管理，开发服务器支持代理和局域网访问。构建环节可配置路径别名、资源输出目录及代码压缩优化。 https://he.uy/posts/22 https://he.uy/posts/22 Sat, 19 Dec 2020 23:08:03 GMT 九宫格抽奖功能包含五个步骤：获取奖品列表和抽奖次数，有次数时请求接口并启动动画，最终显示中奖信息。布局采用九个格子，中间为抽奖按钮，通过Vue控制状态变量如抽奖次数、按钮状态和奖品索引。抽奖动画分三阶段调整速度，接口返回结果后匹配奖品ID停止动画，抽奖次数减少并在结束时弹窗提示。 https://he.uy/posts/21 https://he.uy/posts/21 Fri, 23 Oct 2020 11:10:20 GMT Nuxt框架通过pages目录自动生成路由，支持动态路径配置。SEO优化可在head函数中设置meta标签和引入资源，服务端生命周期无法访问window对象，需使用cookie-universal-nuxt插件处理登录信息。公共CSS和JS在nuxt.config.js中配置，事件通信通过Bus插件实现。开发中可能遇到组件重复生成、启动和热更新缓慢问题，建议模块较少的项目使用以提升体验。 https://he.uy/posts/20 https://he.uy/posts/20 Tue, 18 Aug 2020 21:57:27 GMT 通过Vue自定义指令实现全局按钮权限控制，避免在每个按钮重复添加v-if判断。后端在动态路由的meta字段返回权限数组，自定义指令根据当前路由权限与按钮文本匹配，无权限时自动移除DOM元素。只需在按钮添加v-has指令即可完成权限校验，提升维护效率。该方法适用于动态路由场景，也可结合权限数组使用v-if作为备选方案。 https://he.uy/posts/19 https://he.uy/posts/19 Mon, 17 Aug 2020 20:45:19 GMT 动态路由适用于权限精细控制的场景，需后端提供树形结构权限数据。登录后通过路由拦截器获取权限数据，经筛选函数转换为组件对象后动态添加至路由。需注意环境区分和懒加载方式，生产环境推荐require语法。常见问题包括404路由需在动态路由添加后注册，刷新空白需使用replace跳转。 https://he.uy/posts/18 https://he.uy/posts/18 Mon, 01 Jun 2020 22:23:20 GMT 预渲染针对单页应用SEO和首屏加载问题，将交互少且需优化的页面转为静态HTML。通过webpack插件prerender-spa-plugin实现，配置生产环境下的打包目录、预渲染路由和渲染延迟时间，并设置代理接口处理动态数据。预渲染适用于静态官网等场景，能提升加载速度，但动态内容仍需服务端渲染支持。 https://he.uy/posts/17 https://he.uy/posts/17 Fri, 17 Apr 2020 23:22:48 GMT Vue 3.0 Beta版发布，配套工具链多数处于Alpha或实验阶段。项目初始化需通过vue-cli插件升级，自动安装依赖并配置构建环境。新特性引入setup函数管理状态，支持ref定义响应式数据、computed计算属性和watch监听。上下文可通过getCurrentInstance获取，路由与状态库适配仍在开发中，暂不建议生产环境使用。 https://he.uy/posts/16 https://he.uy/posts/16 Thu, 16 Jan 2020 22:46:14 GMT Webpack核心配置涵盖入口、输出、加载器和插件等基本概念。开发环境通过webpack-dev-server实现热更新，利用HtmlWebpackPlugin生成HTML文件，并通过loader处理CSS、SCSS及图片资源。Babel配置将JavaScript代码转换为低版本兼容格式，DefinePlugin区分环境变量。此外，配置支持代码分割实现按需加载，并设置开发环境下的跨域代理，优化前端开发流程。 https://he.uy/posts/14 https://he.uy/posts/14 Sat, 10 Aug 2019 21:31:04 GMT 通过webpack插件compression-webpack-plugin将JS、HTML、CSS文件打包为gzip格式，配置压缩阈值与保留源文件。Nginx中开启gzip功能，设置最小压缩长度、压缩级别及支持的文件类型，并针对旧版IE禁用压缩。实测首屏加载时间从6-7秒缩短至约2秒，有效提升网页传输效率。 https://he.uy/posts/13 https://he.uy/posts/13 Tue, 30 Jul 2019 21:23:36 GMT 项目开发需展示密集设备点位并实现点聚合功能。百度地图在3000点以上出现卡顿，高德地图可支持数万点无压力，通过引入CDN文件、创建地图组件、实例化标记点和聚合器实现功能。高德地图无法显示国外区域，因此补充谷歌地图方案，同样引入JS文件并配置标记点与聚合插件，兼顾国内外用户需求。两种方案均包含信息弹窗和交互事件绑定。 https://he.uy/posts/12 https://he.uy/posts/12 Fri, 05 Jul 2019 21:20:14 GMT 为满足后台项目英文定制需求，采用VueI18n实现中英文国际化。首先安装vue-i18n，创建中英文语言文件，确保变量名一致以支持动态切换。引入Element UI语言包并与自定义语言文件合并，在Vue实例中配置i18n插件。通过修改this.$i18n.locale切换语言，在模板中使用$t方法、在JS中通过i18n.t调用多语言文本，完成国际化集成。 https://he.uy/posts/11 https://he.uy/posts/11 Tue, 18 Jun 2019 21:18:57 GMT Taro作为多端统一开发框架，采用React方式编写代码，替代了微信原生和mpvue开发小程序。mpvue因更新停滞、问题较多而被放弃。项目使用scss、redux-thunk和redux-logger，内置路由管理。功能包括文章列表、分类标签、留言和关于页面，当前富文本解析导致布局混乱，计划更换编辑器以改善显示效果。 https://he.uy/posts/10 https://he.uy/posts/10 Sat, 25 May 2019 21:14:01 GMT 博客系统采用React全家桶重构前端，配合Ant Design组件库实现响应式界面。后端基于Koa2框架搭建，集成MySQL数据库与Sequelize ORM，采用JWT进行登录鉴权。功能涵盖文章发布管理、分类标签操作、多级评论回复、留言互动及友链维护等模块，同时部署Nginx作为Web服务器支撑服务运行。 https://he.uy/posts/9 https://he.uy/posts/9 Wed, 05 Dec 2018 21:12:56 GMT 小程序开发中遇到两个典型问题：textarea组件作为顶级层级会导致placeholder穿透弹出层，临时解决方案是在弹出时隐藏文本域；scroll-view组件无法直接设置100%高度，需通过wx.getSystemInfo动态获取屏幕高度并赋值。官方尚未修复前者，后者可通过系统API灵活适配。 https://he.uy/posts/8 https://he.uy/posts/8 Thu, 29 Nov 2018 21:10:44 GMT 小程序微信支付不支持iOS端虚拟商品交易，如付费知识类产品。支付流程需用户授权获取code，后端通过官方接口换取openid并生成支付参数，前端调用wx.requestPayment完成支付。针对iOS限制，常见做法是提供免费服务或引导至其他平台，但审核严格；可通过wx.getSystemInfo识别用户系统进行差异化处理。 https://he.uy/posts/7 https://he.uy/posts/7 Tue, 20 Nov 2018 21:08:00 GMT mpvue框架基于Vue.js开发微信小程序，支持组件化开发和Vuex数据管理，提供H5与小程序间的代码复用能力。项目初始化依赖vue-cli，构建后需通过微信开发者工具导入dist目录上传。开发中需注意部分限制，如不支持Vue的ref和$refs，定时器清除需在onUnload生命周期手动处理，相关问题可通过社区方案解决。 https://he.uy/posts/6 https://he.uy/posts/6 Fri, 02 Nov 2018 21:06:20 GMT CentOS系统可通过yum快速安装Node.js和npm。首先使用curl命令获取NodeSource仓库的安装脚本，支持4.x或5.x版本，例如运行setup_4.x脚本后执行yum install -y nodejs完成安装。安装时使用-y参数可自动确认操作，最后通过node -v和npm -v命令验证版本号。 https://he.uy/posts/5 https://he.uy/posts/5 Wed, 31 Oct 2018 21:01:34 GMT Nginx配置HTTPS需监听443端口并启用SSL，指定域名、证书文件和密钥路径。设置SSL会话超时、协议版本及加密套件，优先使用服务端密码。静态网页通过location指向根目录和主页文件，API请求代理到本地3443端口。HTTP到HTTPS跳转可在80端口配置重写规则，将请求永久重定向至HTTPS域名。