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 EasyUI API 中文文档 - Calendar日历使用
Oct 19 Javascript
jQuery使用append在html元素后同时添加多项内容的方法
Mar 26 Javascript
jQuery 如何给Carousel插件添加新的功能
Apr 18 Javascript
jQuery前端开发35个小技巧
May 24 Javascript
jQuery控制文本框只能输入数字和字母及使用方法
May 26 Javascript
AngularJS基础 ng-href 指令用法
Aug 01 Javascript
Google 地图API资料整理及详细介绍
Aug 06 Javascript
JavaScript第一篇之实现按钮全选、功能
Aug 21 Javascript
AngularJS基于ngInfiniteScroll实现下拉滚动加载的方法
Dec 14 Javascript
vue.js 实现点击按钮动态添加li的方法
Sep 07 Javascript
JS拖拽排序插件Sortable.js用法实例分析
Feb 20 Javascript
es6中reduce的基本使用方法
Sep 10 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
支持中文、字母、数字的PHP验证码
2015/05/04 PHP
PHP实现的redis主从数据库状态检测功能示例
2017/07/20 PHP
IE8下关于querySelectorAll()的问题
2010/05/13 Javascript
jQuery实现统计复选框选中数量
2014/11/24 Javascript
JavaScript实现广告弹窗效果
2016/08/09 Javascript
AngularJS 仿微信图片手势缩放的实例
2017/09/28 Javascript
Node.js微信 access_token ( jsapi_ticket ) 存取与刷新的示例
2017/09/30 Javascript
jqueryUI tab标签页代码分享
2017/10/09 jQuery
使用cookie绕过验证码登录的实现代码
2017/10/12 Javascript
AngularJS监听ng-repeat渲染完成的方法
2018/03/20 Javascript
浅谈Vue响应式(数组变异方法)
2018/05/07 Javascript
Express本地测试HTTPS的示例代码
2018/06/06 Javascript
vue视图不更新情况详解
2019/05/16 Javascript
解决layui中onchange失效以及form动态渲染失效的问题
2019/09/27 Javascript
以视频爬取实例讲解Python爬虫神器Beautiful Soup用法
2016/01/20 Python
Django接受前端数据的几种方法总结
2016/11/04 Python
Python中pygal绘制雷达图代码分享
2017/12/07 Python
Tensorflow之构建自己的图片数据集TFrecords的方法
2018/02/07 Python
Python cookbook(数据结构与算法)字典相关计算问题示例
2018/02/18 Python
介绍一款python类型检查工具pyright(推荐)
2019/07/03 Python
用Python实现将一张图片分成9宫格的示例
2019/07/05 Python
浅析python中while循环和for循环
2019/11/19 Python
解决django xadmin主题不显示和只显示bootstrap2的问题
2020/03/30 Python
Win10用vscode打开anaconda环境中的python出错问题的解决
2020/05/25 Python
联想台湾官网:Lenovo TW
2018/05/09 全球购物
亚洲最大的运动鞋寄售店:KicksCrew
2020/11/26 全球购物
介绍一下linux的文件系统
2015/10/06 面试题
老师推荐信
2013/10/28 职场文书
中专生的个人自我评价
2013/12/11 职场文书
优秀教师事迹简介
2014/02/02 职场文书
大学校务公开实施方案
2014/03/31 职场文书
公安机关正风肃纪剖析材料
2014/10/10 职场文书
退货证明模板
2015/06/23 职场文书
教你用python控制安卓手机
2021/05/13 Python
国产动画《万圣街》日语配音版制作决定!
2022/03/20 国漫
阿里云国际版 使用Nginx作为HTTPS转发代理服务器
2022/05/11 Servers