前端打包部署服务器升级版

之前写过一篇部署文章 https://mp.csdn.net/editor/html/109307313,这次的部署是基于之前的升级版,配置文件更加简洁,并且只需要一个安装包,打包过程更加清晰,跟着我操作起来吧。

一. 下载 deploy-cli-service 包(开发环境)

npm install deploy-cli-service --save-dev 

yarn add deploy-cli-service --save-dev

二. 删除如下文件和安装包

根目录的deploy文件

前端打包部署服务器升级版_第1张图片

package.json中这三个包卸载掉

三. 修改deploy运行命令

package.json中deploy执行命令

前端打包部署服务器升级版_第2张图片

修改为

前端打包部署服务器升级版_第3张图片

四. 修改deploy.config.js的配置

module.exports = {
  projectName: '业务系统', // 项目名称
  cluster: ['test'], // 集群部署配置,要同时部署多台配置此属性如: ['dev', 'test', 'prod']
  test: {
    name: '测试环境', // 环境名称
    script: 'npm run build:test', // 打包命令
    host: 'xxx.xx.xx.xxx', // 服务器地址
    port: xx, // 服务器端口
    username: 'xxxx', // 服务器登录用户名
    password: 'xxxxxxx', // 服务器登录密码
    distPath: 'dist', // 本地打包生成目录
    webDir: '/root/nginx/xxx/dist', // 服务器部署路径
    bakDir: '/root/nginx/xxx/backups', // 服务器备份路径
    isRemoveRemoteFile: false, // 是否删除远程文件
    isRemoveLocalFile: true // 是否删除本地文件
  }
}

 

五. 执行部署命令

根据要打包的环境,运行package.json中配置的打包命令,打包中项目根目录会生成dist文件,打包完会删除,如果不想删除dist文件,就把上面第四条的isRemoveLocalFile设置为false

然后控制台会输出如下:

前端打包部署服务器升级版_第4张图片

前端打包部署服务器升级版_第5张图片

 

你可能感兴趣的:(前端开发,服务器打包部署,javascript,vue.js)