自动化部署vue项目到服务器

1、项目中添加scp2依赖（用于将文件上传服务器）

2、运行npm install命令安装依赖

3、运行npm run build命令构建项目

4、在项目根目录添加部署脚本文件deploy.js

const client = require('scp2');
const ora = require('ora');
const chalk = require('chalk');
const spinner = ora(chalk.green('正在发布到服务器...'));
spinner.start();

client.scp('./dist/', {    // 本地打包文件的位置
  "host": '192.168.2.10', // IP地址
  "port": '22',            // 服务器端口
  "username": 'root',       // 用户名
  "password": '143239',     // 密码
  "path": '/www'            // 项目路径
}, err =>{
  spinner.stop();
  if (!err) {
    console.log(chalk.green("服务器部署完毕。"))
  } else {
    console.log("err", err)
  }
})

5、在package.json中添加用于执行上述部署脚本的命令

6、执行上述脚本以将打包好的项目部署到服务器

7、在服务器上安装nginx（以cent os7为例）

• 执行sudo yum install -y nginx命令以安装nginx
• 修改nginx配置文件：/etc/nginx/nginx.conf
  
• 修改selinux配置文件（若启动nginx后报403）
  

8、nginx常用操作

• 启动nginx：systemctl start nginx
• 停止Nginx：systemctl stop nginx
• 重启Nginx：systemctl restart nginx
• 查看Nginx状态：systemctl status nginx
• 启用开机启动Nginx：systemctl enable nginx
• 禁用开机启动Nginx：systemctl disable nginx

9、演示

• 当代码发生改变后执行npm run build重新构建项目
  
• 执行npm run dep命令将重新构建好的项目发布到服务器
  
• 刷新网页即可看到部署已生效