本文摘自PHP中文网,作者不言,侵删。
本篇文章给大家带来的内容是关于Vue-CLI 3.x 自动部署项目至服务器的方法介绍(代码),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。
前言:平时部署前端项目流程是:先部署到测试环境ok后再发布到生产环境上,部署到测试环境用 xshell 连上服务器,然后用 xftp 连接服务器,然后本地 build 项目,接着把 build 好的文件通过 xftp 上传到服务器上,整个流程感觉稍有繁琐,重复。
本教程讲解的是 Vue-CLI 3.x 脚手架搭建的vue项目, 利用scp2自动化部署到静态文件服务器 Nginx
一 安装scp2
scp2是一个基于ssh2增强实现,纯粹使用JavaScript编写。
而ssh2就是一个使用nodejs对于SSH2的模拟实现。scp,是secure copy的缩写, scp是Linux系统下基于SSH登陆进行安全的远程文件拷贝命令。这里我们就用这个功能,在Vue编译构建成功之后,将项目推送至测试/生产环境,以方便测试,提高效率。
安装scp2:
1 | npm install scp2 --save-dev
|
二、配置测试/生产环境 服务器SSH远程登陆账号信息
1. 在项目根目录下, 创建 .env.dev 文件 (测试环境变量)
VUE_APP_SERVER_ID变量表示 当前需部署的测试服务器ID为0
2. 在项目根目录下, 创建 .env.prod 文件 (生产环境变量)
VUE_APP_SERVER_ID变量表示 当前需部署的生产服务器ID为1
3. 在项目根目录下, 创建 deploy/products.js 文件
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 |
const fs = require ( 'fs' );
const path = require ( 'path' );
const envfile = process.env.NODE_ENV === 'prod' ? '../.env.prod' : '../.env.dev' ;
const envPath = path.resolve(__dirname, envfile);
const envObj = parse(fs.readFileSync(envPath, 'utf8' ));
const SERVER_ID = parseInt(envObj[ 'VUE_APP_SERVER_ID' ]);
function parse(src) {
const res = {};
src.split( '\n' ).forEach(line => {
const keyValueArr = line.match(/^\s*([\w\.\-]+)\s*=\s*(.*)?\s*$/);
if (keyValueArr != null) {
const key = keyValueArr[1];
let value = keyValueArr[2] || '' ;
const len = value ? value.length : 0;
if (len > 0 && value.charAt(0) === '"' && value.charAt(len - 1) === '"' ) {
value = value.replace(/\\n/gm, '\n' );
}
value = value.replace(/(^[ '"]|[' "]$)/g, '' ).trim();
res[key] = value;
}
});
return res;
}
const SERVER_LIST = [
{
id: 0,
name: 'A-生产环境' ,
domain: 'www.prod.com' ,
host: '46.106.38.24' ,
port: 22,
username: 'root' ,
password: 'Rock@sz18!' ,
path: '/mdm/nginx/dist'
},
{
id: 1,
name: 'B-测试环境' ,
domain: 'test.xxx.com' ,
host: 'XX.XX.XX.XX' ,
port: 22,
username: 'root' ,
password: 'xxxxxxx' ,
path: '/usr/local/www/xxx_program_test/'
}
];
module.exports = SERVER_LIST[SERVER_ID];
|
三、使用scp2库,创建自动化部署脚本
在项目根目录下, 创建 deploy/index.js 文件
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 | const scpClient = require ( 'scp2' );
const ora = require ( 'ora' );
const chalk = require ( 'chalk' );
const server = require ( './products' );
const spinner = ora( '正在发布到' + (process.env.NODE_ENV === 'prod' ? '生产' : '测试' ) + '服务器...' );
spinner.start();
scpClient.scp(
'dist/' ,
{
host: server.host,
port: server.port,
username: server.username,
password: server.password,
path: server.path
},
function (err) {
spinner.stop();
if (err) {
console.log(chalk.red( '发布失败.\n' ));
throw err;
} else {
console.log(chalk.green( 'Success! 成功发布到' + (process.env.NODE_ENV === 'prod' ? '生产' : '测试' ) + '服务器! \n' ));
}
}
);
|
四、添加 package.json 中的 scripts 命令, 自定义名称为 "deploy",
发布到测试环境命令为 npm run deploy:dev
,生产环境为 npm run deploy:prod
1 2 3 4 5 6 | "scripts" : {
"serve" : "vue-cli-service serve --mode dev" ,
"build" : "vue-cli-service build --mode prod" ,
"deploy:dev" : "npm run build && cross-env NODE_ENV=dev node ./deploy" ,
"deploy:prod" : "npm run build && cross-env NODE_ENV=prod node ./deploy" ,
},
|
ps 这里用到了cross_env 得安装 npm i --save-dev cross-env
cross-env能跨平台地设置及使用环境变量,这里用来设置是生产环境还是测试环境。
图解
【相关推荐:JavaScript视频教程】
以上就是Vue-CLI 3.x 自动部署项目至服务器的方法介绍(代码)的详细内容,更多文章请关注木庄网络博客!
相关阅读 >>
javascript中异步和同步的区别是什么
javascript有什么用
javascript怎么设置img内容
javascript中怎么退出循环
详解javascript对象的数据属性与访问器属性
javascript如何将object转为数组
javascript怎么设置cookie
javascript如何取字符串后几位
javascript的后缀是什么
javascript有哪些弹窗
更多相关阅读请进入《服务器》频道 >>
人民邮电出版社
本书对 Vue.js 3 技术细节的分析非常可靠,对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪,Vue.js作者
转载请注明出处:木庄网络博客 » Vue-CLI 3.x 自动部署项目至服务器的方法介绍(代码)