VUE自动化部署全过程
更新时间:2025年11月08日 16:28:52 作者:小小荷塘
本文介绍了使用scp2库将构建后的文件上传到生产或测试环境的方案,包括安装scp2、编写环境脚本、忽略脚本、添加npm脚本命令及执行步骤,该方法简便但不够安全,适合快速部署
放弃npm run build,再压缩上传这种毫无效率的操作了。
使用scp2将build之后的文件上传到生产或测试环境。
此方案本质上就是就是ssh进入服务器,scp本地文件到服务器。
- 缺点很明显,不够安全,不能回滚版本
- 优点就是,很简便。自行判断哦
一、安装scp2
npm install scp2 --save-dev #或 cnpm install scp2 --save-dev
二、写好测试环境和生产环境的脚本
例如测试环境 dev.js、生产环境pro.js 放项目根目录下
- 内容:dev.js
const client = require('scp2');
const ora = require('ora');
const chalk = require('chalk');
const spinner = ora(chalk.green('正在发布到测试服务器...'));
spinner.start();
client.scp('./dist/', { // 本地打包文件的位置
"host": 'XXX.XX.XX.XXX', // IP地址
"port": 'XX', // 服务器端口
"username": 'XXX', // 用户名
"password": '*****', // 密码
"path": '/www/wwwroot/test' // 项目路径
}, err =>{
spinner.stop();
if (!err) {
console.log(chalk.green("测试服务器部署完毕。"))
} else {
console.log("err", err)
}
})
- 内容:pro.js
const client = require('scp2');
const ora = require('ora');
const chalk = require('chalk');
const spinner = ora(chalk.green('正在发布到生产服务器...'));
spinner.start();
client.scp('./dist/', { // 本地打包文件的位置
"host": 'XXX.XX.XX.XXX', // IP地址
"port": 'XX', // 服务器端口
"username": 'XXX', // 用户名
"password": '*****', // 密码
"path": '/www/wwwroot/pro' // 项目路径
}, err =>{
spinner.stop();
if (!err) {
console.log(chalk.green("生产服务器部署完毕。"))
} else {
console.log("err", err)
}
})
三、在.gitignore中忽略node脚本
#不要把服务器的账号密码传到git上哦 乖 pro.js dev.js
四、在package.json中添加脚本命令
"pro":"node pro.js", "test":"node dev.js"
五、执行node脚本
npm run build npm run test
先执行npm run build,再执行npm run test将打包的文件上传到服务器上,一旦build的文件有问题还来得及反悔哦。
如果想一步到位,请看第六步
六、一步到位版本
"pro":"node pro.js", "test":"node dev.js", "upro":"npm run build && npm run pro", "utest":"npm run build && npm run test"
例如:
执行 npm run upro 这个命令之后,它会先npm run build执行打包命令,然后,执行node pro.js,将打包的文件上传到生产服务器上
总结
以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。
相关文章
vue中报错Duplicate keys detected:'1'. This may c
我们在vue开发过程中常会遇到一些错误,这篇文章主要给大家介绍了关于vue中报错Duplicate keys detected:‘1‘. This may cause an update error的解决方法,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2023-03-03
Vue组件开发之LeanCloud带图形校验码的短信发送功能
Vue是目前使用较广泛的三大前端框架之一,其数据驱动及组件化的特性使得前端开发更为快捷便利。本文在LeanCloud 短信轰炸与图形校验码官方文档 基础上,从封装需要出发开发一个简单的短信图形验证Vue组件,具体内容详情大家参考下本文2017-11-11


最新评论