Skip to content

21、Jenkins部署Vue应用

1、将我们的项目上传到Git仓库

image-20250729170850781

2、Jenkins安装NodeJS插件

image-20250729170536810

3、Jenkins配置NodeJS

image-20250730090515356

5、新建构建任务

my-vue-app

image-20250729171137671

6、代码拉取

image-20250729171241868

7、构建环境

image-20250730090540826

8、构建项目

image-20250730090605136

9、构建一次

image-20250730090624207

10、打包

sh
node -v
yarn -v
yarn install
yarn build
image-20250730090720576

11、打包后的文件复制到Nginx静态文件目录

image-20250730090913168

sh
node -v
yarn -v
yarn install
yarn build

pwd

# 拷贝 dist 到 nginx
rm -rf /usr/share/nginx/html/*
cp -r dist/* /usr/share/nginx/html/

image-20250730091803265

会报没有权限

1、解决方式一

sh
# 使用root账号授权
chown -R jenkins:jenkins /usr/share/nginx/html

2、解决方式二

修改Nginx的代理目录

sh
/var/lib/jenkins/workspace/my-vue-app/dist

image-20250730092653435

sh
sudo systemctl reload nginx
sh
node -v
yarn -v
yarn install
yarn build

pwd

# 拷贝 dist 到 nginx
# rm -rf /usr/share/nginx/html/*
# cp -r dist/* /usr/share/nginx/html/