maike-web-deploy

说明&用途

该插件是应对小规模开发而开发的快速部署工具。该工具是基于ubuntu服务器进行配置的。需要服务器安装nginx并配置index的转发地址。同时为指定的cos bucket创建外部链接 如 https://static.test.com

发布逻辑

将index文件发布到服务器指定位置，静态文件发布到腾讯cos上。（打包时注意静态文件路径，见备注）

安装

$  npm install maike-web-deploy -g

配置

在前端项目的根目录创建deploy.json文件，配置参数如下：

{
  "pre": { // 环境名，可自定义，下面工具执行时会用到
    "index":"index.html", // 入口html文件
    "serverParams":{
      "host": "", // 服务器地址
      "port": 22, // ssh端口 
      "username": "",  // 用户名
      "password": "", // 服务器密码
      "path": "",// 静态html文件存放位置
    },
    "cosParams":{
      "SecretId":"", // cos secretId
      "SecretKey":"", // cos secretKey
      "Bucket":"", // bucket名称
      "Region":"ap-beijing", // COS所在region
      "Path":"testProduct" // cos目录 如 test 或 test/test2 ,不建议放在根目录,此处testProduct是示例，需要与下面.env配置同(备注)
    }
  },
  "prod": {
    "index":"index.html", 
    "serverParams":{
      "host": "", 
      "port": 22,
      "username": "", 
      "password": "",
      "path": "",
    },
    "cosParams":{
      "SecretId":"", 
      "SecretKey":"",
      "Bucket":"", 
      "Region":"ap-beijing", 
      "Path":"" 
    }
  },
}

执行命令 （先执行对应的打包命令生成dist文件夹）

直接执行，不用再package.json中配置启动命令

$ deploy dev || deploy prod

备注

webpakc打包时需要配置相关的文件，如在根目录创建 .env.pre

NODE_ENV = 'production'
VUE_APP_STATIC_URL=https://static.test.com/testProduct // 此处以vue举例

在webpack的配置文件中指定,这样打包出来的静态文件引用地址会自动添加VUE_APP_STATIC_URL

publicPath: process.env.VUE_APP_STATIC_URL

package.json 的script中添加执行指令

"pre": "vue-cli-service build --mode pre", // 执行npm run pre的时候会自动引用.env.pre配置文件

其他

作者：张boy 其他问题可联系微信: maikeshequ 欢迎关注公众号 ： 麦壳ZONE 更多好玩好用的前端开发技术持续更新中