本文已同步到专业技术网站 www.sufaith.com, 该网站专注于前后端开发技术与经验分享, 包含Web开发、Nodejs、Python、Linux、IT资讯等板块.

本教程主要讲解的是 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远程登陆账号

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

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

VUE_APP_SERVER_ID=0

2. 在项目根目录下, 创建 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 valuesconst len = value ? value.length : 0if (len > 0 && value.charAt(0) === '"' && value.charAt(len - 1) === '"') {value = value.replace(/n/gm, 'n')}// remove any surrounding quotes and extra spacesvalue = 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任务即可.

linux nginx vue_Vue-CLI 3.x 部署项目至生产服务器相关推荐

  1. linux安装jdk mysql tomcat之部署项目

    最近项目上线自己操作了几遍linux部署项目,有点心得写下来,也是第一次写博客的菜鸟,有不对之处,欢迎各位提出意见- 要求:已经安装好了虚拟机 目的:在虚拟机中安装各软件并实施ssh项目的部署 准备: ...

  2. 部署项目至青云服务器简易流程

    在青云服务器上,安装好项目所需的环境.按照如下步骤部署项目. 第一,将发布文件拷贝到指定的文件路径下. /usr/local/tomcat/tomcat8001/apache-tomcat-7.0.5 ...

  3. 部署项目到云服务器上所遇到的困难

    1.Linux 下 Tomcat 超链接传递参数的 中文问题: https://www.cnblogs.com/lbj-utopia/p/4214201.html 随便一个connector标签内添加 ...

  4. Linux系统运维1 运维 项目研发 网站 服务器 计算机基础 Linux操作系统

    运维的基本概念 运维行业前景 企业运作模式 四大部门 项目研发流程 职责描述: 运维的作用: 网站的相关概念 网站运行流程: IP<–>域名 重要概念: 服务器图片: 服务器:为用户提供服 ...

  5. wlnmp+nginx+mysql+php集合包_LNMP(Linux+Nginx+MySQL+PHP)部署详解(一)

    一.服务器系统环境的选择 1.64位Linux是首选 A.32位系统下,对单个应用程序,存在2.1GB~3.2GB内存使用限制,即使服务器配置了4GB以上的内存,也使用不上,会造成资源的极大浪费. B ...

  6. 自动部署项目,全靠它了!

    前几天我把我的开源项目部署到了云服务器. 我部署的大概流程: 登录到云服务器控制台,新建一个服务器实例(我用的 Ubuntu Linux). 在自己的电脑上生成 SSH 秘钥,将生成的公钥和实例进行绑 ...

  7. 从零部署 Django 项目至云服务器

    过去半个月,成功实现了将 Python Django 搭建的 API 本地项目部署到阿里云服务器.因为是初次尝试部署服务器.注册域名等,甚至也是自己独立去使用 Linux 系统,在整个部署过程中没来得 ...

  8. Jenkins自动构建部署项目

    1. 楔子 在实际开发中,经常需要编译.静态代码检查.自动化测试.打包.部署.启动等一连串重复机械的动作,浪费时间.而且容易出错,而Jenkins就是专门Continuous integration( ...

  9. 阿里云Windows Server 2022服务器在Win10上部署项目上线

    阿里云Windows Server 2022服务器在Win10上部署项目上线 购买服务器 直接到阿里云ECS购买 购买成功后,进入[工作台]找到自己刚刚购买的服务器 进入直接的服务器实例后,点击[重置 ...

最新文章

  1. string日期格式化_java面向对象---日期类
  2. 超详细的Python matplotlib 绘制柱状图
  3. c语言建立队列(顺序队列、循化队列和链式队列)
  4. Java基本数据类型及String类
  5. idea 查看jsp是否被引用_IntelliJ IDEA解析JSP中的Web路径
  6. 详解mybatis映射配置文件
  7. HTML+CSS+JS实现 ❤️电商商品图片幻灯片特效❤️
  8. iphone备忘录突然没了_为什么用过iPhone的人都不再想换回安卓?网友:过于真实,哭了...
  9. [译] Vue: scoped 样式与 CSS Module 对比
  10. SQL Server数据类型概述
  11. XManager 远程访问 Ubuntu16.04 图形界面
  12. CentOS7--Firewalld防火墙
  13. bitnami mysql_最新 Bitnami redmine安装与配置
  14. Exception.ToString()使用及其他方法比较
  15. ECMAScript和JavaScript的关系
  16. 交叉编译Qt5.9.6
  17. SPA 的 SEO 方案对比、最终实践
  18. 6度带坐标向3度带坐标转换
  19. 三调地类图斑符号化MXD
  20. ubuntu命令行配置网络

热门文章

  1. Python菜鸟入门:day09数据结构
  2. Raspberry Pi 的新用法:检测家中的漏水情况
  3. iPhone13系列预计5499起;蔚来回应31岁企业家“自动驾驶”车祸去世;小米取消MIX4防丢失模式无卡联网服务|极客头条...
  4. 最“好”的编程语言 PHP 真的无药可救了吗?
  5. 让软件自己写软件,机器编程未来会取代程序员吗?
  6. 用 Python 实现手机自动答题,下一个百万获奖人可能就是你!
  7. 只会高中数学运算就能发现算法?Google 开源的 AutoML-Zero 有多厉害
  8. 拼多多公布新iPhone SE补贴后价格:2899元起;BOSS直聘回应“App崩了”;Chrome 新测试版发布|极客头条...
  9. 阿里工程师手把手教你设计 B 端垂类营销中心!
  10. iPhone 9或于4月3日发布;复制粘贴之父Larry Tesler去世;Android 11开发者预览版来了!| 极客头条...