Vue-CLI 3.X 部署项目至生产服务器的方法


Posted in Javascript onMarch 22, 2019

本教程主要讲解的是 Vue-CLI 3.x 脚手架搭建的vue项目, 先构建生成dist文件(纯静态应用), 然后自动化部署到静态文件服务器 Nginx。

一、Nginx服务器文件的配置

server {
    listen 80;
    server_name www.xxxxxx.com;#生产环境
    location / {
      root /usr/local/www/xxx_program/;
      index index.html;
      try_files $uri $uri/ /index.html;
    }
  }
  server {
    listen 80;
    server_name test.xxxxxx.com; #测试环境
    location / {
      root /usr/local/www/xxx_program_test/;
      index index.html;
      try_files $uri $uri/ /index.html;
    }
  }

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

在项目根目录下, 创建 .env 文件 (当前环境变量)

VUE_APP_SERVER_ID变量指代 当前需部署的服务器ID为0

VUE_APP_SERVER_ID=0

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

该文件功能如下:

(1) 读取env环境变量

const fs = require('fs')
const path = require('path')
// env环境变量的路径
const envPath = path.resolve(__dirname, '../.env')
// 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'
  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
}

(2) 定义多个服务器账号 及 根据 SERVER_ID 导出当前环境服务器账号

const SERVER_LIST = [
 {
  id: 0,
  name: 'A-生产环境',
  domain: 'www.xxx.com',
  host: 'XX.XX.XX.XX',
  port: 22,
  username: 'root',
  password: 'xxxxxxx',
  path: '/usr/local/www/xxx_program/'
 },
 {
  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('正在发布到生产服务器...')
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! 成功发布到生产服务器! \n'))
 }
})

四、添加 package.json 中的 scripts 命令, 自定义名称为 “deploy”

"scripts": {
  "serve": "vue-cli-service serve",
  "build": "vue-cli-service build",
  "lint": "vue-cli-service lint",
  "deploy": "npm run build && node ./deploy"
 }

五、执行部署任务

在项目根目录下 执行 npm run deploy 命令, 或 使用 vue ui控制面板执行deploy任务, 即可自动打包并部署至线上服务器

备注: 要切换部署的服务器, 只需修改 .env文件中的服务器ID, 然后再执行deploy任务即可.

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
从零开始学习jQuery (三) 管理jQuery包装集
Feb 23 Javascript
javascript实现tabs选项卡切换效果(自写原生js)
Mar 19 Javascript
jQuery CSS3自定义美化Checkbox实现代码
May 12 Javascript
Javascript打印局部页面实例
Jun 21 Javascript
JS实现添加,替换,删除节点元素的方法
Jun 30 Javascript
Vue自定义指令拖拽功能示例
Feb 17 Javascript
微信小程序 五星评价功能的实现
Mar 09 Javascript
AngularJS 霸道的过滤器小结
Apr 26 Javascript
React学习笔记之事件处理(二)
Jul 02 Javascript
vue中实现图片和文件上传的示例代码
Mar 16 Javascript
详解vue中async-await的使用误区
Dec 05 Javascript
javascript实现滚轮轮播图片
Dec 13 Javascript
微信小程序城市选择及搜索功能的方法
Mar 22 #Javascript
使用node搭建自动发图文微博机器人的方法
Mar 22 #Javascript
如何从零开始手写Koa2框架
Mar 22 #Javascript
Vue服务端渲染实践之Web应用首屏耗时最优化方案
Mar 22 #Javascript
详解ES6中的Map与Set集合
Mar 22 #Javascript
js控制随机数生成概率代码实例
Mar 21 #Javascript
详解bootstrap-fileinput文件上传控件的亲身实践
Mar 21 #Javascript
You might like
世界咖啡生产者论坛呼吁:需要立即就咖啡价格采取认真行动
2021/03/06 咖啡文化
php 深入理解strtotime函数的使用详解
2013/05/23 PHP
CodeIgniter连贯操作的底层原理分析
2016/05/17 PHP
利用PHP绘图函数实现简单验证码功能的方法
2016/10/18 PHP
HTML5使用DeviceOrientation实现摇一摇功能
2015/06/05 Javascript
jQuery实现固定在网页顶部的菜单效果代码
2015/09/02 Javascript
简单实现JS对dom操作封装
2015/12/02 Javascript
jquery基础知识第一讲之认识jquery
2016/03/17 Javascript
JavaScript中文件上传API详解
2016/04/01 Javascript
有关jquery与DOM节点操作方法和属性记录
2016/04/15 Javascript
DOM操作和jQuery实现选项移动操作的简单实例
2016/06/07 Javascript
jQuery中的一些常见方法小结(推荐)
2016/06/13 Javascript
深入探究AngularJs之$scope对象(作用域)
2017/07/20 Javascript
nuxt中使用路由守卫的方法步骤
2019/01/27 Javascript
原生js实现html手机端城市列表索引选择城市
2020/06/24 Javascript
python统计字符串中指定字符出现次数的方法
2015/04/04 Python
python 转换 Javascript %u 字符串为python unicode的代码
2016/09/06 Python
详解Python多线程Selenium跨浏览器测试
2017/04/01 Python
python 如何快速找出两个电子表中数据的差异
2017/05/26 Python
神经网络python源码分享
2017/12/15 Python
详解Python核心编程中的浅拷贝与深拷贝
2018/01/07 Python
python pycurl验证basic和digest认证的方法
2018/05/02 Python
对python3 urllib包与http包的使用详解
2018/05/10 Python
Python numpy中矩阵的基本用法汇总
2019/02/12 Python
详细介绍pandas的DataFrame的append方法使用
2019/07/31 Python
python3常用的数据清洗方法(小结)
2019/10/31 Python
将python依赖包打包成window下可执行文件bat方式
2019/12/26 Python
微软俄罗斯官方网站:Microsoft俄罗斯
2016/09/18 全球购物
计算机个人求职信范例
2014/01/24 职场文书
高三高考决心书
2014/03/11 职场文书
保护环境建议书100字
2014/05/13 职场文书
施工安全标语
2014/06/07 职场文书
2016五一手机促销广告语
2016/01/28 职场文书
2016护理专业求职自荐书
2016/01/28 职场文书
使用javascript解析二维码的三种方式
2021/11/11 Javascript
php访问对象中的成员的实例方法
2021/11/17 PHP