不使用命令发版的话主要使用xshell和xftp两个软件
xshell登录ssh连接上服务器环境,然后使用xftp左边进入本地该项目中,右边进入服务器上该项目,省事的话直接左边文件拖到右边
也简单主要使用插件ssh2-sftp-client
以下配置命令打包主要是根据框架有关,框架如何写的可以这样配置发版命令等我研究研究在更新。
1、在package.json中配置发布的命令
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"build:test": "vue-cli-service build --mode test",
//配置的发版的命令 老版的框架使用的vue-cli-service
"deploy:test": "git pull && vue-cli-service build && node ./scripts/deploy.js test",
//新版的框架使用的命令,新框架放弃了使用vue-cli-service。node把什么东西注入到生产环境中的webpack.config.prod.js
"deploy:127": "git pull && cross-env NODE_ENV=production webpack --config build/webpack.config.prod.js && node ./scripts/deploy.js 127",
"lint": "vue-cli-service lint"
},
2、./scripts/deploy.js 该目录下创建文件
安装依赖ssh2-sftp-client
主要使用该依赖对本地和服务器进行连接,实现命令部署发版
const path = require('path')
const Client = require('ssh2-sftp-client')
const client = new Client()
const argv = process.argv
const env = argv[argv.length - 1]
const config = require('../deployment.server.json')
const srcDir = path.join(__dirname, '../dist')
const targetDir = config[env].targetDir
client.connect(config[env]).then(() => {
return client.uploadDir(srcDir, targetDir, /^((?!apiConfig\.js).)+$/)
})
.then(result => {
console.log("文件部署成功");
console.log(result);
})
.finally(() => {
return client.end()
})
.catch(err => {
console.log("文件部署失败", err);
})
3、配置需要连接的服务器信息(…/deployment.server.json 创建该目录下的文件)
{
"test":{
"host":"192.168.1.127",
"port":"22",
"username":"root",
"password":"123456",
//服务器上该项目地址(发版时需要替换的文件的地址)
"targetDir":"/home/nginx/html/demo"
}
}
项目目录如下
第一次使用一定记得在项目中把项目备份,防止配置写的有问题,给环境更炸了
备份:
打开xshell,连接ssh,进入该项目的上一级目录,把项目整个复制粘贴即可
(假设已在项目这级目录)
cd …
ll 看下所有文件信息,是否有需要复制的项目
cp -r 源文件/目录 目标文件/目录(一般起名格式:源文件名加上复制的日期)
cp -r demo demo1011
备份之后,进行部署测试,环境登上去看看是否正常。
这是使用命令发版的配置,还有一种CI/CD自动部署发版的。等我研究研究在整理记录下。