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 相关文章推荐
Extjs EditorGridPanel中ComboBox列的显示问题
Jul 04 Javascript
JS TextArea字符串长度限制代码集合
Oct 31 Javascript
JavaScript表达式:URL 协议介绍
Mar 10 Javascript
最简单的JavaScript图片轮播代码(两种方法)
Dec 18 Javascript
实用又漂亮的BootstrapValidator表单验证插件
May 30 Javascript
AngularJS 执行流程详细介绍
Aug 18 Javascript
原生JS取代一些JQuery方法的简单实现
Sep 20 Javascript
jquery把int类型转换成字符串类型的方法
Oct 07 Javascript
js实现碰撞检测特效代码分享
Oct 16 Javascript
JS实现根据数组对象的某一属性排序操作示例
Jan 14 Javascript
详解用JS添加和删除class类名
Mar 25 Javascript
VuePress 中如何增加用户登录功能
Nov 29 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教程孙仲岳主讲
2008/01/07 PHP
php使用正则验证中文
2016/04/06 PHP
PHP实现清除MySQL死连接的方法
2016/07/23 PHP
php通过会话控制实现身份验证实例
2016/10/18 PHP
实例分析PHP将字符串转换成数字的方法
2019/01/27 PHP
Javascript将string类型转换int类型
2010/12/09 Javascript
js数组去重的常用方法总结
2014/01/24 Javascript
JavaScript获取网页中第一个链接ID的方法
2015/04/03 Javascript
Bootstrap每天必学之附加导航(Affix)插件
2016/04/25 Javascript
bootstrap快速制作后台界面
2016/12/05 Javascript
JS 实现 ajax 异步浏览器兼容问题
2017/01/21 Javascript
express框架实现基于Websocket建立的简易聊天室
2017/08/10 Javascript
微信小程序支付及退款流程详解
2017/11/30 Javascript
Vue面试题及Vue知识点整理
2018/10/07 Javascript
VueJS 组件参数名命名与组件属性转化问题
2018/12/03 Javascript
Vue 使用formData方式向后台发送数据的实现
2019/04/14 Javascript
JS匿名函数内部this指向问题详析
2019/05/10 Javascript
AntV F2和vue-cli构建移动端可视化视图过程详解
2019/10/08 Javascript
解决vue初始化项目时,一直卡在Project description上的问题
2019/10/31 Javascript
JavaScript通如何过RGraph实现动态仪表盘
2020/10/15 Javascript
[03:59]5分钟带你了解什么是DOTA2(第二期)
2017/02/07 DOTA
[48:24]完美世界DOTA2联赛PWL S3 Forest vs INK ICE 第一场 12.09
2020/12/12 DOTA
Python实现提取文章摘要的方法
2015/04/21 Python
django中send_mail功能实现详解
2018/02/06 Python
Python随机生成身份证号码及校验功能
2018/12/04 Python
Python实现队列的方法示例小结【数组,链表】
2020/02/22 Python
django中的数据库迁移的实现
2020/03/16 Python
Python根据字符串调用函数过程解析
2020/11/05 Python
关键字throw与throws的用法差异
2016/11/22 面试题
优秀团员个人事迹材料
2014/01/29 职场文书
《美丽的彩虹》教学反思
2014/02/25 职场文书
扩大国家免疫规划实施方案
2014/03/21 职场文书
中国梦演讲稿教师篇
2014/04/23 职场文书
党员学习中共十八大思想报告
2014/09/12 职场文书
初中开学典礼新闻稿
2015/07/17 职场文书
Vue如何清空对象
2022/03/03 Vue.js