vue 实现打包并同时上传至服务器端

将 publish_script 及以下文件 upload.server.js 添加到 主文件下,与 src 同级别

具体操作步骤:

1、安装 npm install scp2

2、将下面两条命令加入至 package.json 的 scripts 中

复制代码
"upload": "node publish_script/upload.server.js",
"publish": "npm run build && npm run upload"

3、需后端提供:

(1)修改 path后的服务器站点目录名称为 lucky,即 /etc/nginx/wwwroot/lucky

(3)修改 host: 47.109.67.254

4、修改 vue.config.js 中,publicPath的值,都改成 "/" 才对应的上

复制代码
module.exports = {
  publicPath: process.env.NODE_ENV === 'production' ? '/' : '/'
};

5、使用 npm run publish 发布并部署至服务器

upload.server.js 文件

复制代码
// 1.安装scp2  执行命令  npm install scp2
// 2.将下面两条命令加入至 package.json 的 scripts 中
// "upload": "node publish_script/upload.server.js",
// "publish": "npm run build && npm run upload"
// 3. 使用 npm run publish 发布并部署至服务器
var serverConfig = {
  publishPath: './dist/', // 本地需要发布的文件夹
  host: '47.109.67.254', // 远程服务器Ip
  username: 'marking', // ssh 用户名称
  password: '][poiu+_)(*&', // ssh 用户密码
  path: '/etc/nginx/wwwroot/lucky' // 远程服务器站点目录
}

// 引入scp2模块
var client = require('scp2')
// var random = Math.random()
client.scp(serverConfig.publishPath, {
  'host': serverConfig.host,
  'username': serverConfig.username,
  'password': serverConfig.password,
  'port': '10022', // 默认SSH端口
  'path': serverConfig.path
}, function(err) {
  if (!err) {
    console.log('npm run publish: scp2工具上传完毕,远端服务路径:' + serverConfig.path)
  } else {
    console.log('npm run publish: 上传失败!!,原因:', err)
  }
})

希望我的愚见能够帮助你哦~,若有不足之处,还望指出,你们有更好的解决方法,欢迎大家在评论区下方留言支持,大家一起相互学习参考呀~

相关推荐
Можно2 分钟前
GET与POST深度解析:区别、适用场景与dataType选型指南
前端·javascript
爱上妖精的尾巴7 分钟前
5-41 WPS JS宏 数组迭代基础测试与双数组迭代的使用方法测试
前端·javascript·wps
Tisfy12 分钟前
“豆包聊天搜索” —— 直接在Chrome等浏览器地址栏开启对话
前端·chrome·豆包
Data_agent12 分钟前
京东商品价格历史信息API使用指南
java·大数据·前端·数据库·python
大学生资源网22 分钟前
基于Vue的网上购物管理系统的设计与实现(java+vue+源码+文档)
java·前端·vue.js·spring boot·后端·源码
diudiu_3327 分钟前
XSS跨站脚本攻击
前端·xss
终极前端开发协会28 分钟前
【web前端 - 齐枭飞】乾坤【qiankun】应用,主项目与子项目交互详细代码,里面有详细代码,可直接粘贴过去 直接应用 ,
前端·前端框架·交互
闲蛋小超人笑嘻嘻43 分钟前
localStorage用法详解
前端
Swift社区1 小时前
用 RN 的渲染模型,反推 Vue 列表的正确拆分方式
前端·javascript·vue.js
Mr_chiu1 小时前
微前端从入门到精通:Vue开发者的大型应用架构演进指南
前端·架构