How to Automate One-Click Vue Frontend Deployment with Jenkins

Learning Preparation

This tutorial assumes you have basic knowledge of Jenkins, such as installation and basic usage. You can refer to the earlier article on Jenkins + Docker one‑click deployment of SpringBoot projects for background.

Mall Project Overview

The Mall project is an open‑source e‑commerce system built with SpringBoot 3 and Vue . It follows a micro‑service architecture (2024 version), uses Docker and Kubernetes for deployment, and includes both a front‑store and an admin management system supporting orders, products, carts, permissions, coupons, members, payments, and more.

Backend repository: https://github.com/macrozheng/mall

Cloud (Docker/K8s) repository: https://github.com/macrozheng/mall-swarm

Video tutorials: https://www.macrozheng.com/video/

Installation and Plugin Configuration

The Vue front‑end build requires the NodeJS plugin. Install and configure it as follows:

Go to

System Management → Plugin Management

and install the NodeJS plugin. Jenkins URL: http://192.168.3.101:8180

After installation, navigate to

System Management → Global Tool Configuration

, add a new NodeJS installation, select version

v20.18.1

, and save.

One‑Click Deployment of the Vue Front‑End

Create a freestyle Jenkins job to build and deploy the

mall-admin-web

front‑end project.

Select

Build a free‑style software project

.

In Source Code Management , add the Git repository (e.g., https://gitee.com/macrozheng/mall-admin-web ).

In Build Environment , add the previously configured NodeJS tool.

Add a build step

Execute shell

with the following script to compile the front‑end:

<code># View version information
npm -v
# Switch npm registry to Taobao mirror for faster downloads
npm config set registry https://registry.npmmirror.com
# Install project dependencies
npm install
# Build the project
npm run build
</code>

Add another build step

Execute shell via SSH

to publish the built files to Nginx:

<code>docker stop nginx
 echo '----stop nginx----'
rm -rf /mydata/nginx/html/admin
 echo '----rm html dir----'
cp -r /mydata/jenkins_home/workspace/mall-admin-web/dist /mydata/nginx/html/admin
 echo '----cp dist dir to html dir----'
docker start nginx
 echo '----start nginx----'
</code>

Save the job and click Build Now . The job will automatically build the Vue project, copy the generated

dist

directory to the Nginx HTML folder, and restart Nginx.

After a successful run, the admin interface is accessible at http://192.168.3.101/admin/ .

Summary

Jenkins can automate one‑click packaging and deployment for both SpringBoot back‑ends and Vue front‑ends, enabling rapid and repeatable delivery of the Mall e‑commerce system.

Project Repository

https://github.com/macrozheng/mall-admin-web