Vue CLI 3.x 自动部署项目至服务器的方法


Posted in Javascript onApril 02, 2019

前言

平时部署前端项目流程是:先部署到测试环境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:

npm install scp2 --save-dev

二、配置测试/生产环境 服务器SSH远程登陆账号信息

1. 在项目根目录下, 创建 .env.dev 文件 (测试环境变量)

VUE_APP_SERVER_ID变量表示 当前需部署的测试服务器ID为0

// .env.dev文件中
VUE_APP_SERVER_ID=0

2. 在项目根目录下, 创建 .env.prod 文件 (生产环境变量)

VUE_APP_SERVER_ID变量表示 当前需部署的生产服务器ID为1

// .env.prod文件中
VUE_APP_SERVER_ID=1

3. 在项目根目录下, 创建 deploy/products.js 文件

/*
 *读取env环境变量
 */
const fs = require('fs');
const path = require('path');
// env 文件 判断打包环境指定对应的服务器id
const envfile = process.env.NODE_ENV === 'prod' ? '../.env.prod' : '../.env.dev';
// env环境变量的路径
const envPath = path.resolve(__dirname, envfile);
// env对象
const envObj = parse(fs.readFileSync(envPath, 'utf8'));
const SERVER_ID = parseInt(envObj['VUE_APP_SERVER_ID']);
function parse(src) {
 // 解析KEY=VAL的文件
 const res = {};
 src.split('\n').forEach(line => {
 // matching "KEY' and 'VAL' in 'KEY=VAL'
 // eslint-disable-next-line no-useless-escape
 const keyValueArr = line.match(/^\s*([\w\.\-]+)\s*=\s*(.*)?\s*$/);
 // matched?
 if (keyValueArr != null) {
  const key = keyValueArr[1];
  let value = keyValueArr[2] || '';

  // expand newlines in quoted values
  const len = value ? value.length : 0;
  if (len > 0 && value.charAt(0) === '"' && value.charAt(len - 1) === '"') {
  value = value.replace(/\\n/gm, '\n');
  }

  // remove any surrounding quotes and extra spaces
  value = value.replace(/(^['"]|['"]$)/g, '').trim();

  res[key] = value;
 }
 });
 return res;
}
/*
 *定义多个服务器账号 及 根据 SERVER_ID 导出当前环境服务器账号
 */
const SERVER_LIST = [
 {
 id: 0,
 name: 'A-生产环境',
 domain: 'www.prod.com',// 域名
 host: '46.106.38.24',// ip
 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 文件

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

"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能跨平台地设置及使用环境变量,这里用来设置是生产环境还是测试环境。

图解

Vue CLI 3.x 自动部署项目至服务器的方法

参考阅读:Vue-CLI 3.X 部署项目至生产服务器的方法

总结

以上所述是小编给大家介绍的Vue-CLI 3.x 自动部署项目至服务器,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
jQuery示例收集
Nov 05 Javascript
用json方式实现在 js 中建立一个map
May 02 Javascript
JavaScript常用脚本汇总(一)
Mar 04 Javascript
浅谈javascript中call()、apply()、bind()的用法
Apr 20 Javascript
KnockoutJS 3.X API 第四章之数据控制流component绑定
Oct 10 Javascript
JavaScript实现简单的树形菜单效果
Jun 23 Javascript
angular.js + require.js构建模块化单页面应用的方法步骤
Jul 19 Javascript
Vue 报错TypeError: this.$set is not a function 的解决方法
Dec 17 Javascript
layui原生表单验证的实例
Sep 09 Javascript
layui 上传图片 返回图片地址的方法
Sep 26 Javascript
vue插槽slot的简单理解与用法实例分析
Mar 14 Javascript
你不知道的 TypeScript 高级类型(小结)
Aug 28 Javascript
Vue 组件修改根实例的数据的方法
Apr 02 #Javascript
vue鼠标悬停事件实例详解
Apr 01 #Javascript
jquery简单实现纵向的无缝滚动代码实例
Apr 01 #jQuery
详解Vue前端对axios的封装和使用
Apr 01 #Javascript
浅谈js闭包理解
Apr 01 #Javascript
详解Vue之父子组件传值
Apr 01 #Javascript
微信二次分享报错invalid signature问题及解决方法
Apr 01 #Javascript
You might like
sphinx增量索引的一个问题
2011/06/14 PHP
ThinkPHP CURD方法之field方法详解
2014/06/18 PHP
php下pdo的mysql事务处理用法实例
2014/12/27 PHP
php实现的支付宝网页支付功能示例【基于TP5框架】
2019/09/16 PHP
JS setCapture 区域外事件捕捉
2010/03/18 Javascript
js jq 单击和双击区分示例介绍
2013/11/05 Javascript
浅析JavaScript动画
2015/06/10 Javascript
jQuery多条件筛选如何实现
2015/11/04 Javascript
jQuery点击按钮弹出遮罩层且内容居中特效
2015/12/14 Javascript
基于Node.js的强大爬虫 能直接发布抓取的文章哦
2016/01/10 Javascript
下一代Bootstrap的5个特点 超酷炫!
2016/06/17 Javascript
详解Angular的双向数据绑定(MV-VM)
2016/12/26 Javascript
帝国cms首页列表页实现点赞功能
2017/10/30 Javascript
jquery中有哪些api jQuery主要API
2017/11/20 jQuery
解决vue打包之后静态资源图片失效的问题
2018/02/21 Javascript
解决vuejs项目里css引用背景图片不能显示的问题
2018/09/13 Javascript
vue单页面应用打开新窗口显示跳转页面的实例
2018/09/21 Javascript
详解vue如何使用rules对表单字段进行校验
2018/10/17 Javascript
封装微信小程序http拦截器过程解析
2019/08/13 Javascript
[02:40]DOTA2英雄基础教程 先知
2013/11/29 DOTA
Python查看多台服务器进程的脚本分享
2014/06/11 Python
Python with的用法
2014/08/22 Python
python基于windows平台锁定键盘输入的方法
2015/03/05 Python
python删除服务器文件代码示例
2018/02/09 Python
使用python批量读取word文档并整理关键信息到excel表格的实例
2018/11/07 Python
python中类的属性和方法介绍
2018/11/27 Python
Python如何应用cx_Oracle获取oracle中的clob字段问题
2019/08/27 Python
Python 脚本拉取 Docker 镜像问题
2019/11/10 Python
HTML5+CSS3:3D展示商品信息示例
2017/01/03 HTML / CSS
测绘工程个人的自我评价
2013/11/23 职场文书
八年级音乐教学反思
2014/01/09 职场文书
学生请假条格式
2014/04/11 职场文书
大学生安全责任书
2014/07/25 职场文书
餐厅保洁员岗位职责
2015/04/10 职场文书
比较几种Redis集群方案
2021/06/21 Redis
mysql拆分字符串作为查询条件的示例代码
2022/07/07 MySQL