Gitlab CI CD 自动化打包部署前端(vue)项目_gitlab部署前端包(1)

Vue 编码基础

2.1.1. 组件规范

2.1.2. 模板中使用简单的表达式

2.1.3 指令都使用缩写形式

2.1.4 标签顺序保持一致

2.1.5 必须为 v-for 设置键值 key

2.1.6 v-show 与 v-if 选择

2.1.7 script 标签内部结构顺序

2.1.8 Vue Router 规范

Vue 项目目录规范

2.2.1 基础

2.2.2 使用 Vue-cli 脚手架

2.2.3 目录说明

2.2.4注释说明

2.2.5 其他

开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

2.生成SSH密钥对:
如果尚未生成,请在本地机器上生成一个SSH密钥对:

ssh-keygen -t rsa -b 4096 -f \~/.ssh/id_rsa_vue_deploy

将公钥(\~/.ssh/id_rsa_vue_deploy.pub)添加到服务器的授权密钥中。

3.将SSH私钥添加到GitLab:

进入GitLab中的项目页面。
转到 "设置" > "CI / CD",展开 "变量" 部分。
添加一个名为 
### 使用GitLab CI/CD自动化部署Vue前端项目 为了实现Vue前端项目自动化部署,可以利用GitLab CI/CD管道配置`.gitlab-ci.yml`文件。此文件定义了一系列作业(job),这些作业描述了构建(build)、测试(test)以及部署(deploy)应用程序所需的步骤。 对于一个典型的Vue CLI创建的应用程序来说,通常会有一个简单的CI/CD流程如下: #### 创建.gitlab-ci.yml 文件 在项目的根目录下创建一个新的文件叫做`.gitlab-ci.yml`,其内容可能类似于下面这样: ```yaml image: node:latest stages: - npm ci artifacts: paths: - node_modules/ only: - main build_app: stage: build script: - npm run build artifacts: paths: - dist/ only: - main test_app: stage: test script: - npm run test:unit only: - main deploy_production: stage: deploy script: - apt-get update -qy - apt-get install -y ruby-dev - gem install dpl - dpl --provider=heroku --app=$HEROKU_APP_NAME --api-key=$HEROKU_API_KEY environment: name: production url: https://your-production-url.com only: - main ``` 这段脚本首先指定了使用的Docker镜像版本为最新的Node.js环境。接着定义了三个阶段:构建(build)、测试(test)部署(deploy)[^1]。 在这个例子中,安装依赖项的任务被缓存起来以便加速后续的构建过程;构建应用会产生静态资源并将其作为artifacts保存下来供后面的job使用;最后,在部署环节里选择了Heroku平台作为目标托管站点,并通过dpl工具上传打包后的文件到指定位置[^2]。 需要注意的是实际环境中可能会有所不同,比如不同的云服务商有不同的部署方式,这里仅作为一个通用的例子展示如何设置GitLab CI/CD流水线来处理Vue项目
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值