vue 自动化部署 jenkins 篇

前端项目打包部署,以前都是手工运行打包命令,打包结束后压缩,然后上传到服务器上解压部署。这种重复性的工作,确实有点让人烦,而且效率也不高。
本文基于 vue 的前端项目、 GitHub 的代码仓库,简述在 CentOS7 上利用 jenkins 实现自动部署。

一、安装插件 NodeJS

Jenkins -> Manage Jenkins -> Manage Plugins

-> Avaliable 搜索 NodeJS,勾选 NodeJS,点击 Install without restart 安装

二、配置 NodeJS 插件

Jenkins -> Manage Jenkins -> Global Tool Configuation

NodeJS 节点下,点击 NodeJS installations

填写 Name,勾选 Install automatically,选择 Version,最后点击 Save

三、发布配置

Jenkins -> New Item

填写 job name,选择 Freestyle project,点击 OK

点击 Configure 配置 job 构建参数

General 配置,填写 Project name,Description

Source Code Management,选择 Git,填写 Repository URL,如果是私有仓库,还需要填写 Credentials( 点击 Add 添加)

Build Environment,勾选 Provide Node & npm bin/ folder to PATH

Build,点击 Add build step 下拉,选择 Execute shell

输入以下脚本

node -v
npm install -g yarn --registry=https://registry.npm.taobao.org
yarn  -v
yarn install

yarn lint
yarn build

点击 Save

四、测试构建

Jenkins -> All -> node_vue -> Build Now

五、遇见问题

项目是在 windows 下开发,windows 对文件名大小不敏感,上传到 CentOS7 构建时出现如上错误,通过更改文件名的大小写,保持代码中引用文件名与实际文件名大小写一致,构建成功。

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
你可以使用Jenkins来实现Vue项目的自动化部署。下面是一个简单的步骤: 1. 安装Jenkins:首先,你需要在你的服务器上安装Jenkins。你可以根据官方文档或者其他资源来完成安装过程。 2. 配置Jenkins:一旦安装完成,你需要通过浏览器访问Jenkins的网址,并且按照指引完成初始设置。这可能包括创建管理员账户、安装插件等。 3. 创建一个新的Jenkins任务:在Jenkins主页,点击"新建任务"按钮,然后输入任务名称和选择"自由风格"项目类型。 4. 配置代码仓库:在任务配置页面的"源码管理"部分,选择你的代码仓库类型(如Git),并提供代码仓库的URL和凭据(如果有的话)。 5. 配置构建步骤:在任务配置页面的"构建"部分,添加构建步骤。对于Vue项目,你可以使用以下命令来构建: ``` npm install npm run build ``` 这将安装项目依赖并生成静态文件。 6. 配置部署步骤:在任务配置页面的"构建后操作"部分,添加部署步骤。你可以使用SSH插件或者其他适用的插件来实现远程部署。 如果你使用SSH插件,你需要提供远程服务器的地址、凭据和部署命令。部署命令应该包括将构建后的静态文件复制到远程服务器的指定目录。 如果你使用其他插件或者工具来进行部署,根据插件或者工具的文档进行配置即可。 7. 保存任务配置并运行任务:一旦你完成了任务配置,点击"保存"按钮,并运行任务。Jenkins将根据你的配置自动构建和部署Vue项目。 请注意,这只是一个简单的示例,你可能需要根据你的具体情况进行适当的调整和配置。此外,确保你的服务器和部署目标环境已经正确配置,并且有足够的权限来执行构建和部署操作。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值