Vue + Jenkins 打包部署笔记

本文记录了使用Vue结合Jenkins进行自动化打包部署的过程。首先介绍了如何通过webpack.DefinePlugin设置全局变量,然后详细说明了Jenkins执行shell命令进行打包的步骤,以及利用Publish Over SSH插件将构建产物发布到远程机器的具体配置,包括设置远程SSH机器信息、上传文件和执行命令。在部署过程中遇到的问题是,当npm命令参数中包含特殊字符时在centos上可能导致打包失败,当前采用的临时解决方案是使用yarn代替npm执行命令。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

代码参数读取配置

使用webpack.DefinePlugin可以实现全局变量定义

//读取npm/yarn 参数
let argv = [...process.argv].slice(2)
const myEnv = {}
for (const arg of argv) {
  let index = arg.indexOf('=')
  console.log(arg)
  if (index >= 0 && arg.startsWith('--')) {
    myEnv[arg.substring(2, index)] = arg.substring(index + 1)
  }
}

....
// 使用插件 这里定义了一个全局变量ENV
configureWebpack: {
	plugins: [
		new webpack.DefinePlugin({
			'ENV': myEnv
		}),
.....
},

在代码中可以直接使用ENV获取到相应内容

Jenkins 打包

直接执行shell实现
如果使用npm 需要多加一个 --,yarn 可以不需要

npm install &&
npm run build -- --title='test' --home='main'

发布到远程机器

直接使用Publish Over SSH插件实现

需要做的配置
  • 系统管理 -> 系统设置 中设置远程ssh机器信息

在这里插入图片描述- 这下面找到Publish Over SSH进行设置全局配置
在这里插入图片描述 Passphrase 意义为远程机器密码,图简单可以直接设置这个
Remote Directory 表示远程上传的文件的目标文件夹,必须设置且登录用户必须有写入权限

  • 设置项目中的 Publish Over SSH 配置信息

在构建一栏选择 Send files or execute commands over SSH

上面的Name 选择刚才配置的
设置上传文件配置
上传的目录相对路径为之前设置的的全局(Remote Directory)目录下

Source files 表示要上传的文件,可以直接输入文件的相对路径,获取**/*.zip这样的表达式
Remove prefix 移除的目录前缀,下图的意思为移除dist前缀,不然目标机器的路径会多dist一级
Remote Directory 表示目标路径,在之前的全局路径之下
Exec command 上传完毕之后想要执行的命令,使用的shell定义日期变量来选中目标文件
在这里插入图片描述### 遇到的问题

  • centos 上执行npm输入参数是,如果参数中存在特殊字符会导致打包失败,解决方案暂时未知临时替换成系统yarn来执行

出现的问题如下:

# 当出现链接是会打包会报错
npm run build -- --home='http://baidu.com'
// 这是对应的错误信息
{ SyntaxError: Identifier directly after number (1:2)
    at Parser.pp$4.raise (/var/lib/jenkins/workspace/test/node_modules/acorn/dist/acorn.js:2757:13)
    at Parser.pp$8.readNumber (/var/lib/jenkins/workspace/test/node_modules/acorn/dist/acorn.js:5005:59)
    at Parser.pp$8.getTokenFromCode (/var/lib/jenkins/workspace/test/node_modules/acorn/dist/acorn.js:4870:17)
    at Parser.pp$8.readToken (/var/lib/jenkins/workspace/test/node_modules/acorn/dist/acorn.js:4628:15)
    at Parser.pp$8.nextToken (/var/lib/jenkins/workspace/test/node_modules/acorn/dist/acorn.js:4619:15)
    at Parser.pp$8.next (/var/lib/jenkins/workspace/test/node_modules/acorn/dist/acorn.js:4576:8)
    at Parser.pp$3.parseParenAndDistinguishExpression (/var/lib/jenkins/workspace/test/node_modules/acorn/dist/acorn.js:2220:10)
    at Parser.pp$3.parseExprAtom (/var/lib/jenkins/workspace/test/node_modules/acorn/dist/acorn.js:2163:41)
    at Parser.parseExprAtom (/var/lib/jenkins/workspace/test/node_modules/acorn-dynamic-import/lib/inject.js:60:31)
    at Parser.pp$3.parseExprSubscripts (/var/lib/jenkins/workspace/test/node_modules/acorn/dist/acorn.js:2047:19)
    at Parser.pp$3.parseMaybeUnary (/var/lib/jenkins/workspace/test/node_modules/acorn/dist/acorn.js:2024:17)
    at Parser.pp$3.parseExprOps (/var/lib/jenkins/workspace/test/node_modules/acorn/dist/acorn.js:1966:19)
    at Parser.pp$3.parseMaybeConditional (/var/lib/jenkins/workspace/test/node_modules/acorn/dist/acorn.js:1949:19)
    at Parser.pp$3.parseMaybeAssign (/var/lib/jenkins/workspace/test/node_modules/acorn/dist/acorn.js:1925:19)
    at Parser.pp$3.parseExpression (/var/lib/jenkins/workspace/test/node_modules/acorn/dist/acorn.js:1896:19)
    at Parser.pp$1.parseStatement (/var/lib/jenkins/workspace/test/node_modules/acorn/dist/acorn.js:815:45) pos: 2, loc: Position { line: 1, column: 2 }, raisedAt: 2 }
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值