SpringBoot实战电商项目商城（25k+star）地址：https://github.com/macrozheng/mall总结上次讲了使用Jenkins一键打包部署SpringBoot应用，这次我们讲会讲到如何打包和部署前端应用。以Vue前端应用为例。这里我们使用mall-admin-web中的代码进行演示。学前准备学习本文需要对Jenkins和Nginx有一定的了解。对这些不熟悉的朋友可以参考下面的文章。使用Jenkins一键打包部署SpringBoot应用，就这些6！Nginx的这些神奇功能你一定不知道！Jenkins中Vue前端应用的自动部署需要依赖NodeJS插件进行打包，所以我们先安装配置插件，然后创建任务打包部署。在系统设置->插件管理中安装NodeJS插件，选择安装插件；搜索NodeJS插件并安装；配置NodeJS插件在系统设置->全局工具配置中配置插件；选择添加NodeJS，配置好版本号后，点击保存完成设置；创建任务我们需要创建一个任务来打包部署我们的前端应用，这里以我的mall-admin-web项目为例。任务执行过程如下：构建一个自由风格的软件项目：在源码管理中添加Git代码仓库的相关配置，这里我使用的是Gitee上的代码，地址为：https://gitee.com/macrozheng/...in将我们的node环境添加到构建环境中：添加一个执行shell的构建来编译打包我们的前端代码：构建脚本如下：#查看版本信息npm-v#解决Github上存储的sass无法下载的问题问题SASS_BINARY_SITE=https://npm.taobao.org/mirrors/node-sass/npminstallnode-sass#将镜像源换成淘宝的加速访问npmconfigsetregistryhttps://registry.npm.taobao.org#安装项目依赖npminstall#项目打包npmrunbuild添加一个使用ssh执行远程脚本的构建，将我们打包好的代码发布到Nginx：远程执行脚本如下：dockerstopnginxecho'----停止nginx----'rm-rf/mydata/nginx/htmlecho'----rmhtmldir----'cp-r/mydata/jenkins_home/workspace/mall-admin-web/dist/mydata/nginx/htmlecho'----cpdistdirtohtmldir----'dockerstartnginxecho'----startnginx----'点击保存后，直接在任务列表中点击运行，即可完成自动化部署：坑node-sass无法下载，构建失败。由于node-sass的源码在Github上，所以经常访问不到。我们在构建的时候需要单独设置node-sass的下载地址。#linuxSASS_BINARY_SITE=https://npm.taobao.org/mirrors/node-sass/npminstallnode-sass#windowsetSASS_BINARY_SITE=https://npm.taobao.org/mirrors/node-sass&&npminstallnode-sass有一些dependencies无法下载导致构建失败由于npm源访问速度慢的问题，部分源可能下载不下来，可以使用淘宝的npm源解决。#设为淘宝的镜像源npmconfigsetregistryhttps://registry.npm.taobao.org#设为官方镜像源npmconfigsetregistryhttps://registry.npmjs.org项目地址https://github.com的/macrozheng/mall-admin-web公众号mall项目全套学习教程正在连载中，第一时间关注公众号。
