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/