weixin_45869811的博客

原创 多端口 Nginx Docker Compose 构建 + GitLab CI/CD 部署全流程

本文介绍了使用GitLab CI/CD实现自动化构建和部署的完整流程，主要包括：1）GitLab Runner注册配置；2）编写.gitlab-ci.yml定义构建和部署任务；3）配置Nginx服务器；4）编写Dockerfile和docker-compose.yml文件；5）触发CI/CD流程；6）常用容器管理命令。通过这套方案，开发者只需推送代码即可自动完成镜像构建和部署，实现80/81端口映射访问服务。

原创 完整多端口 Nginx Docker部署 + GitLab Runner注册及标签使用指南

本文介绍了GitLab CI/CD自动化部署流程。首先需要准备Docker和GitLab Runner环境，注册Runner并获取Token。通过配置.gitlab-ci.yml文件定义构建和部署阶段，包括npm安装、项目构建、Docker镜像创建和容器部署。同时提供了Nginx配置示例和Dockerfile文件模板，重点说明端口映射关系。最后介绍了触发CI流程的Git命令和常用容器管理命令，实现代码推送后自动构建部署服务。

原创 GitLab CI + Docker 自动构建前端项目并部署 — 完整流程文档

本文介绍了在Linux服务器上搭建GitLab CI/CD自动化部署环境的具体步骤。主要内容包括：1）服务器环境准备（安装Docker和GitLab Runner）；2）注册GitLab Runner；3）准备项目代码和Dockerfile；4）编写.gitlab-ci.yml配置文件；5）Nginx配置说明。文章详细说明了从代码提交到自动化部署的完整流程，包括构建、打包和部署阶段的具体操作，并提供了常用排查命令和注意事项。该方案适用于前端项目的自动化部署，通过Docker容器化部署保证环境一致性。

原创 服务器安装gielab社区版

本文介绍了在CentOS系统上安装和配置GitLab的完整流程。首先需要安装SSH、Postfix等依赖服务，添加GitLab仓库后安装社区版GitLab，并记录初始密码。安装完成后，通过浏览器访问GitLab管理页面，修改root密码并管理用户申请。接着指导用户注册新账号并配置SSH密钥实现免密登录：生成SSH密钥对，将公钥添加到GitLab账户中，以便进行安全的代码推送和拉取操作。整个过程涵盖了从系统环境准备到用户管理的全套GitLab部署方案。

原创 Nginx 文件目录结构总览

【代码】Nginx 文件目录结构总览。

原创 Linux 系统根目录下的典型结构

原创 彻底关闭win10自动更新

如何彻底关闭Win10自动更新 四种方法教给你！ - 系统之家

原创 自定义指令双击复制

'dblclick'})},// 定义复制到剪贴板的函数try {message.success('复制成功')console.error('复制失败:', error)message.error('复制失败')可以挂载到全局进行使用。

原创 封装表头筛选组件并且不影响table的原有功能

template><a-popover}"<div<a-switch/></div><h1>表头设置</h1><hr /><br /><a-input placeholder="搜索添加更多字段" @input="search"></a-input></div>// 开关控制表头显示隐藏，为open为true的返回给columns})// 查询表头方法})} else {})// 优先加载本地数据要不然会影响列表的显示。

原创 vite打包显示打包时间

vite打包显示打包时间

原创 Vite启动后提示“Network: use `--host` to expose“，且无法通过网络IP访问服务

执行 npm run dev | serve --host 后控制台还是会显示 Netvork: user --host to expose。当使用 Vite 构建项目后，需要通过局域网中的电脑或手机访问服务调试时，发现通过 IP + 端口无法访问。如果将此设置为 0.0.0.0 将监听所有地址，包括局域网和公网地址。在控制台会显示 user --host to expose（使用 --host 暴露网络）中另一台设备需要访问该服务时，必须通过本机。尝试访问后，发现找不到这个服务，原因是。

原创 使用Element的upload上传组件，不使用action属性上传

httpRequest方法主要处理显示缩略图，并且将需要用到的file转换成base64的文件格式。http-request 覆盖默认的上传行为，可以自定义上传的实现。:http-request="httpRequest"方法。

原创 前端npm和yarn更换国内淘宝镜像

npm config set registry https://registry.npmmirror.com/ (最新地址)yarn config set registry https://registry.npm.taobao.org/ (旧地址)npm config set registry https://registry.npm.taobao.org/ (旧地址)

原创 vue项目生成二维码

【代码】vue项目生成二维码。

原创 this.$copyText；vue-clipboard2作用；vue-clipboard2剪切板

this.$copyText；vue-clipboard2作用；vue-clipboard2剪切板

原创 修改Echarts图表的标题和副标题的内容

修改Echarts图表的标题和副标题的内容

原创 el-upload传多余的参数

el-upload传多余的参数

原创 展示el-image组件的放大镜效果

展示el-image组件的放大镜效果

原创 vue 页面刷新跳回登录页问题

vue 页面刷新跳回登录页问题

原创 vue中debugger无法调试

vue中debugger无法调试

原创 第一次上传仓库

第一次上传仓库

原创 vue2favicon.ico配置

vue2favicon.ico配置

原创 el-upload 上传 照片墙上传照片，上传一张之后，上传框就消失

同时在el-upload上的两个钩子添加事件:on-change="handleIntroduceUploadHide"，注意，如果我们要删除照片，删除之后，是希望上传框出现的，所以还要:on-remove="handleIntroduceRemove"，在删除时触发事件，显示上传框。上传之后，右边的这个框就隐藏，方法是借鉴。上的，链接忘记了，后面想起来了补上。

原创 webpack3 报错 Error in ./node_modules/@wangeditor/editor/dist/index.esm.js

然后再npm run build 项目进行打包，再去运行项目npm run dev 就不报错了。就出现了报错，把这句引入注释掉，报错信息就会消失， 报错信息如下。编译器，按照官网步骤安装使用，安装完引入。最近在写编译器的需求，经过研究，选择了。.base.conf.js文件。找到下面的代码增加一句代码。

原创 vue2+wangEditor5富文本编辑器

/ 【注意】一定要用 Object.seal() 否则会报错。# 或者 npm install @wangeditor/editor-for-vue --save。// 组件销毁时，及时销毁 editor ，重要！# 或者 npm install @wangeditor/editor --save。-- 工具栏 -->-- 编辑器 -->

原创 ElementUI中input回车触发页面刷新问题及其解决方法

在日常的开发过程中，你可能会遇到一个问题：在的el-form表单中，如果只存在一个el-input输入框，当你输入值后按下回车，页面会发生刷新。这是因为当form元素中只有一个输入框时，按下回车将触发表单的默认提交事件，这是W3C标准的规定。

原创 element-ui的el-table改变某一列单个单元格的背景颜色（根据不同颜色渲染）

【代码】element-ui的el-table改变某一列单个单元格的背景颜色（根据不同颜色渲染）

原创 点击视频暂停暂停学习时间

【代码】点击视频暂停暂停学习时间。

原创 窗口缩小放大暂停学习时间

【代码】窗口缩小放大暂停学习时间。

原创 关闭浏览器触发监听器，向后端发送请求

可能你也观察到了，我使用了fetch请求，那是因为axios异步请求在这里不起作用！搭建的前后端分离项目，后端存储用户登录信息和Token。现在的需求是，多端只可以有一个用户登录，当一个用户。问题：刷新和关闭浏览器标签时都会触发，暂时无法限制刷新页面不触发该事件，有想法的小伙伴请留言呢。同时如果是前后端分离项目，一定加上跨域设置 no-cors。否则部署线上则会出现跨域异常。同时，fetch请求最大支持** 64KB**的请求体，所以注意传参的载荷。删除该用户的登录信息，以此来解决用户及时下线的目的。

原创 实时监听屏幕宽高

【代码】实时监听屏幕宽高。

原创 vue.draggable实现表格拖拽排序效果

拖放涉及到两种元素，一种是被拖拽元素（源对象），一种是放置区元素（目标对象）。按住A元素往B元素拖拽，A元素即为源对象，B元素即为目标对象。--当然这个拖拽效果有点生硬，下面使用Vue自带的。组件，给排序添加平滑的过渡效果。

原创 下载依赖报错

然后根据自己的实际情况使用yarn install/npm install/cnpm install。下载对应版本的npm install node-sass@4.12.0。使用命令npm cache clean -f。根据报错提示切换对应的node版本。npm/cnpm/yarn三个试着用。

原创 前端小知识总结

1.ES6只能新增值，无法重新赋值就会报错 2.CommonJS 输出是值的拷贝，即原来模块中的值改变不会影响已经加载的该值， ES6静态分析，动态引用，输出的是值的引用，值改变，引用也改变，即原来模块中的值改变则该加载的值也改变。2：还有，如果自定义对象，开发者重写prototype之后，原有的constructor会丢失，因此，为了规范开发，在重写对象原型时一般都需要重新给 constructor 赋值，以保证对象实例的类型不被篡改。，用于判断一个变量是否某个对象的实例，内部机制是通过原型链来判断的。

原创 uniapp 定义全局过滤器

第二步：main.js引入和注册全局。第一步：新建文件目录和文件。

原创 vue按需自动导入依赖

【代码】vue按需自动导入依赖。

原创 vue父向子传值

公共组件需要定义一个父组件示例 面包屑的封装。

原创 vue路由守卫

vue路由守卫

原创 vue路由的编写

【代码】vue路由的编写。

原创 vue接口的封装

local.js文件第二步建立request.js文件在request.js引入。第三步在src下一级建立api文件夹。建立local.js文件。