本教程主要讲解的是 Vue-CLI 3.x 脚手架搭建的vue项目, 先构建生成dist文件(纯静态应用), 然后自动化部署到静态文件服务器 Nginx。

一、Nginx服务器文件的配置

server { listen 80; server_name ', 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任务即可.

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。