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 中文文档 可调整尺寸
Sep 29 Javascript
在jQuery ajax中按钮button和submit的区别分析
Oct 07 Javascript
createTextRange()的使用示例含文本框选中部分文字内容
Feb 24 Javascript
Javascript验证方法大全
Sep 21 Javascript
js实现StringBuffer的简单实例
Sep 02 Javascript
Bootstrap导航中表单简单实现代码
Mar 06 Javascript
jQuery简单实现的HTML页面文本框模糊匹配查询功能完整示例
May 09 jQuery
JS与jQuery实现ListBox上移,下移,左移,右移操作功能示例
May 31 jQuery
微信小程序获取用户信息的两种方法wx.getUserInfo与open-data实例分析
May 03 Javascript
Vue开发环境中修改端口号的实现方法
Aug 15 Javascript
js实现随机抽奖
Mar 19 Javascript
vue 通过 Prop 向子组件传递数据的实现方法
Oct 30 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水印
2007/03/16 PHP
php生成随机密码的几种方法
2011/01/17 PHP
数据库中排序的对比及使用条件详解
2012/02/23 PHP
php按字符无乱码截取中文的方法
2015/03/27 PHP
php判断目录存在的简单方法
2019/09/26 PHP
PHP中通过getopt解析GNU C风格命令行选项
2019/11/18 PHP
Laravel框架集合用法实例浅析
2020/05/14 PHP
JS target与currentTarget区别说明
2011/08/28 Javascript
JavaScript中的splice()方法使用详解
2015/06/09 Javascript
JQuery点击事件回到页面顶部效果的实现代码
2016/05/24 Javascript
微信js-sdk分享功能接口常用逻辑封装示例
2016/10/13 Javascript
js代码实现下拉菜单【推荐】
2016/12/15 Javascript
Node.js 8 中的 util.promisify的详解
2017/06/12 Javascript
Vue resource中的GET与POST请求的实例代码
2017/07/21 Javascript
Javascript中 toFixed四舍六入方法
2017/08/21 Javascript
解决jQuery使用append添加的元素事件无效的问题
2018/08/30 jQuery
ElementUI之Message功能拓展详解
2019/10/18 Javascript
在Python操作时间和日期之asctime()方法的使用
2015/05/22 Python
Django返回json数据用法示例
2016/09/18 Python
python通过socket实现多个连接并实现ssh功能详解
2017/11/08 Python
简单了解python关系(比较)运算符
2019/07/08 Python
python 控制Asterisk AMI接口外呼电话的例子
2019/08/08 Python
如何基于Python创建目录文件夹
2019/12/31 Python
python pprint模块中print()和pprint()两者的区别
2020/02/10 Python
python3中使用__slots__限定实例属性操作分析
2020/02/14 Python
Django中ORM找出内容不为空的数据实例
2020/05/20 Python
英国领先的大码时装品牌之一:Elvi
2018/08/26 全球购物
有个性的自我评价范文
2013/11/15 职场文书
大学校园活动策划书
2014/02/04 职场文书
代领毕业证委托书
2014/08/02 职场文书
党的群众路线领导班子整改方案
2014/09/27 职场文书
2015军训通讯稿大全
2015/07/18 职场文书
怎样写工作总结啊!
2019/06/18 职场文书
高中优秀作文(范文)
2019/08/15 职场文书
Apache压力测试工具的安装使用
2021/03/31 Servers
Oracle使用别名的好处
2022/04/19 Oracle