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 相关文章推荐
[原创]网络复制内容时常用的正则+editplus
Nov 30 Javascript
初学JavaScript_03(ExtJs Grid的简单使用)
Oct 02 Javascript
jquery采用oop模式class类的使用示例
Jan 22 Javascript
jQuery Validation Plugin验证插件手动验证
Jan 26 Javascript
input框中的name和id的区别
Nov 16 Javascript
详解js界面跳转与值传递
Nov 22 Javascript
文件上传的几个示例分享【推荐】
Dec 16 Javascript
JSON数据中存在单个转义字符“\”的处理方法
Jul 11 Javascript
Vuex的基本概念、项目搭建以及入坑点
Nov 04 Javascript
JS字符串常用操作方法实例小结
Jun 24 Javascript
详解JWT token心得与使用实例
Aug 02 Javascript
vue  elementUI 表单嵌套验证的实例代码
Nov 06 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下检测字符串是否是utf8编码的代码
2008/06/28 PHP
php方法调用模式与函数调用模式简例
2011/09/20 PHP
php 阴历-农历-转换类代码
2012/01/16 PHP
PHP数据库链接类(PDO+Access)实例分享
2013/12/05 PHP
PHP中单引号与双引号的区别分析
2014/08/19 PHP
15 个 JavaScript Web UI 库
2010/05/19 Javascript
JS小功能(onmouseover实现选择月份)实例代码
2013/11/28 Javascript
EasyUI实现第二层弹出框的方法
2015/03/01 Javascript
JavaScript原生对象之Date对象的属性和方法详解
2015/03/13 Javascript
AngularJS equal比较对象实例详解
2016/09/14 Javascript
JavaScript中transform实现数字翻页效果
2017/03/08 Javascript
使用jQuery ajaxupload插件实现无刷新上传文件
2017/04/23 jQuery
JavaScript实现提交模式窗口后刷新父窗口数据的方法
2017/06/16 Javascript
JS中Map和ForEach的区别
2018/02/05 Javascript
微信小程序实现省市区三级地址选择
2020/06/21 Javascript
vue中实现上传文件给后台实例详解
2019/08/22 Javascript
一起写一个即插即用的Vue Loading插件实现
2019/10/31 Javascript
JavaScript实现轮播图特效
2020/04/10 Javascript
JavaScript实现简单的弹窗效果
2020/05/19 Javascript
python发腾讯微博代码分享
2014/01/10 Python
python实现dnspod自动更新dns解析的方法
2014/02/14 Python
Python在不同目录下导入模块的实现方法
2017/10/27 Python
numpy中以文本的方式存储以及读取数据方法
2018/06/04 Python
python仿抖音表白神器
2019/04/08 Python
python控制nao机器人身体动作实例详解
2019/04/29 Python
django 多数据库及分库实现方式
2020/04/01 Python
css3实现一个div设置多张背景图片及background-image属性实例演示
2017/08/10 HTML / CSS
Molly Bracken法国电子商店:法国女性时尚品牌
2019/07/24 全球购物
Tuckernuck官网:经典的美国品质服装、鞋子和配饰
2021/01/11 全球购物
会计学应届毕业生推荐信
2013/11/04 职场文书
司仪主持词两篇
2014/03/22 职场文书
意向协议书范本
2014/04/23 职场文书
机电专业求职信
2014/06/14 职场文书
降价通知函
2015/04/23 职场文书
房屋买卖定金协议书
2016/03/21 职场文书
创业计划书之烤红薯
2019/09/26 职场文书