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 相关文章推荐
JS中style属性
Oct 11 Javascript
IE6图片加载的一个BUG解决方法
Jul 13 Javascript
jQuery源码分析-03构造jQuery对象-工具函数
Nov 14 Javascript
jQuery与getJson结合的用法实例
Aug 07 Javascript
Bootstrap 模态对话框只加载一次 remote 数据的完美解决办法
Jul 09 Javascript
XMLHttpRequest对象_Ajax异步请求重点(推荐)
Sep 28 Javascript
vue 表单验证按钮事件交由父组件触发的方法
Dec 17 Javascript
javascript中join方法实例讲解
Feb 21 Javascript
vue实现鼠标经过动画
Oct 16 Javascript
微信小程序商品详情页底部弹出框
Nov 22 Javascript
Vue事件处理原理及过程详解
Mar 11 Javascript
threejs太阳光与阴影效果实例代码
Apr 05 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
丧钟首部独立剧集《丧钟:骑士与龙》北美正式开播,场面血腥
2020/04/09 欧美动漫
php源码加密 仿微盾PHP加密专家(PHPCodeLock)
2010/05/06 PHP
ThinkPHP模板IF标签用法详解
2014/07/01 PHP
php curl 上传文件代码实例
2015/04/27 PHP
PHP实现数组的笛卡尔积运算示例
2017/12/15 PHP
PHP反射实际应用示例
2019/04/03 PHP
jQuery asp.net 用json格式返回自定义对象
2010/04/07 Javascript
js获取会话框prompt的返回值的方法
2015/01/10 Javascript
实例详解JSON数据格式及json格式数据域字符串相互转换
2016/01/07 Javascript
js实现常用排序算法
2016/08/09 Javascript
two.js之实现动画效果示例
2017/11/06 Javascript
解读vue生成的文件目录结构及说明
2017/11/27 Javascript
JavaScript中this用法学习笔记
2019/03/17 Javascript
基于jQuery的时间戳与日期间的转化
2019/06/21 jQuery
JS如何把字符串转换成json
2020/02/21 Javascript
python 文件与目录操作
2008/12/24 Python
python类和继承用法实例
2015/07/07 Python
Python 实现数据库更新脚本的生成方法
2017/07/09 Python
对python list 遍历删除的正确方法详解
2018/06/29 Python
python查找重复图片并删除(图片去重)
2019/07/16 Python
python使用原始套接字发送二层包(链路层帧)的方法
2019/07/22 Python
python新式类和经典类的区别实例分析
2020/03/23 Python
python构造IP报文实例
2020/05/05 Python
简单了解Python多态与属性运行原理
2020/06/15 Python
Python限制内存和CPU使用量的方法(Unix系统适用)
2020/08/04 Python
HTML5 script元素async、defer异步加载使用介绍
2013/08/23 HTML / CSS
英国可持续奢侈品包包品牌:Elvis & Kresse
2018/08/05 全球购物
销售经理工作职责范文
2013/12/03 职场文书
竞选学生会主席演讲稿
2014/04/24 职场文书
老干部工作先进集体事迹材料
2014/05/21 职场文书
意向书范本
2014/07/29 职场文书
出国签证在职证明
2014/09/20 职场文书
法定代表人授权委托书格式
2014/10/14 职场文书
如何用JavaScript学习算法复杂度
2021/04/30 Javascript
教你用python实现12306余票查询
2021/06/30 Python
详解在SQLPlus中实现上下键翻查历史命令的功能
2022/03/18 SQL Server