Implementation of publishing Vue project with Jenkins one click package

  • Jenkins installation
    • install
    • Replace the port number (it runs on port 8080 by default)
    • Basic configuration
  • Publish Vue project
    • Install plug-in nodejs
    • Configure nodejs plug-in
    • Create task

Jenkins installation

Jenkins is an open source CI & CD software used to automate various tasks, including building, testing and deploying software.

Jenkins supports various operation modes, including system package, docker or an independent Java program.


The operating system here is WSL Ubuntu. For the installation of other systems, please refer to the official Jenkins documentation

wget -q -O - | sudo apt-key add -
sudo sh -c 'echo deb binary/ > /etc/apt/sources.list.d/jenkins.list'
sudo apt-get update
sudo apt-get install jenkins

Replace the port number (it runs on port 8080 by default)

Jenkins’ configuration file is in/etc/default/jenkins; Found in itHTTP-PORTAnd modify


sudo systemctl start jenkins
# OR
sudo service jenkins start

If you want to start up, run automatically

sudo systemctl enable jenkins

If you encounter an error as shown in the figure below, please install JDK first

Basic configuration

After successful startup, enter the corresponding address(ip:port)get intoJenkins management interface-As shown below

stayThe file corresponding to the red font in the figure aboveGet the default administrator password in – specific commands

cat /var/lib/jenkins/secrets/initialAdminPassword

After the command is executed, return to the following figure

Enter the password and enterCustomize JenkinsInterface (as shown below)

In this interface, we selectInstall recommended plug-insThe plug-in will be installed; As shown below

After plug-in installationWill automatically enterSet user name and passwordInterface (as shown below)

Click the button after inputSave and completeIt will enter the next interfaceInstance configuration

Click the buttonSave and completeEnter a new interface and click the buttonStart using JenkinsJust enteredJenkins main interface(as shown in the figure below), so far, the installation and basic configuration of Jenkins have been completed.

Publish Vue project

>Nodejs is required for packaging Vue projects. After packaging, the packaged files need to be uploaded to the target server via SSH. So next, we will install Jenkins’s nodejs plug-in and publish over SSH plug-in.

Install plug-in nodejs

In Jenkins main interfaceworkbench, clickSystem Management > plug in managementEnter the plug-in management interface (as shown below)

The search results are shown in the figure below

Check the plug-in and click Install to enter the plug-in download interface (as shown below)

Configure nodejs plug-in

In Jenkins main interfaceworkbench, clickSystem Management > global tool settingsEnter the plug-in management interface and find the nodejs option (as shown below)

installPublish Over SSHPlug in and configure

Publish Over SSHInstallation and of plug-insNodejs plug-inYes, start configuring plug-ins after installation;

In Jenkins main interfaceworkbench, clickSystem Management > system configurationEnter the plug-in configuration interface and scroll toPublish over SSHAnd clickSSH ServersBelowAdd button(as shown below)

Click the buttonseniorThe following interface appears:

Create task

So far, the Jenkins plug-ins required to package Vue have been installed. Let’s start the task of creating Vue project packaging.

The specific operation is shown in the figure below

Click the buttondetermineAfter that, see the figure below

After installing the configuration described above, clickpreservationThe button will jump to the details interface of the created task.

So far, we have implemented a simple Jenkins configuration of one click packaging front-end project.

This is the end of this article about the implementation of using Jenkins one click package to publish Vue project. For more information about Jenkins package to publish Vue project, please search the previous articles of developeppaer or continue to browse the relevant articles below. I hope you will support developeppaer in the future!

Recommended Today

Android service details

Personal study notes are not allowed to be reproduced without permission. Thank you~ Contents of this article 1、 Introduction 2、 Create service 3、 Startservice() 1. analysis of life cycle and related methods 2. demo 4、 Bindservice() 1. analysis of life cycle and related methods 2. demo:activity and service communication 5、 Intentservice 1. definitions 2. use […]