Jenkins实现与Vue项目的打包发布

今天测试一下Jenkins对Vue项目的打包发布

服务器环境

• centos7.4

Jenkins 安装部署

可以参照之前写的Jenkins系列教程

nodeJs环境安装

直接下载Nodejs的压缩包，然后在服务上解压到指定目录就可以了

 

tar -zxvf node-v13.6.0-linux-x64.tar.gz

• 然后配置到环境变量

 

vi /ect/profile

添加下面代码，注意改成自己的路径

export PATH=$PATH:/usr/node/node-v13.6.0-linux-x64/bin

 

source /etc/profile # 刷新环境变量

然后运行下面命令查看是否配置正确

node -v # 执行一个就可以
npm -v

 

npm config set registry https://registry.npm.taobao.org # 将npm的下载源更改为淘宝镜像

在Jenkins中配置插件

• 安装nodeJS插件

   

  

   

   

  安装完成后重启

• 配置nodeJs路径
  Global Tool Configuration→NodeJS

   

  

   

   

  不建议使用自动安装的，后面构建的时候容易卡死

在Jenkins中配置项目

• 新建freestyle项目

• 配置git连接

   

  

   

• 配置git地址

   

  

   

• 选择nodeJs环境

   

  

   

• 执行构建命令，一定要选择shell

   

  

   

 

cd /var/lib/jenkins/workspace/smartfertilize # 先跳转到自己的工作空间目录
npm install --ignore-scripts # 不添加可能会install失败
npm install
rm -rf ./dist/* # 清除上一次的构建打包
npm run build # 打包
rm -rf /usr/tomcat/tomcat/webapps/wx/* # 移除tomcat里之前发布的
cp -rf ./dist/* /usr/tomcat/tomcat/webapps/wx # 发布到自己的tomcat里

• 然后保存，点击build now

构建完成

访问tomcat下对应的目录，就可以看到了