vue 前端Vue-CLI配置scp2进行服务器自动部署

安装scp2

npm install scp2 --save-dev

npm install --save-dev cross-env

package.json

“deploy:prod”: “npm run build && cross-env NODE_ENV=prod node ./yirenck”,

跟目录建立yirenck文件夹

里面建立文件 index.js products.js

index.js

// yirenck/index.js里面
const scpClient = require("scp2");
const ora = require("ora");
const chalk = require("chalk");
const server = require("./products");
// console.log('server',server);
// const spinner = ora(
//  '正在发布到' +
//   (process.env.NODE_ENV === 'production' ? '生产' : '测试') +
//   '服务器...'
// );
console.log(
  chalk.green(
    "正在发布到" +
      (process.env.NODE_ENV === "production" ? "生产" : "测试") +
      "服务器..."
  )
);
var Client = require("ssh2").Client;
var conn = new Client();
// 在执行shell命令后,把开始上传部署项目代码放到这里面
console.log("server", server);
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! 成功发布到" +
            (process.env.NODE_ENV === "production" ? "生产" : "测试") +
            "服务器! \n"
        )
      );
    }
  }
);

products.js

/*
 *读取env环境变量
 */

const fs = require("fs");
const path = require("path");
// env 文件 判断打包环境指定对应的服务器id
const envfile = process.env.NODE_ENV === "prod" ? "../.env" : "../.env";
// env环境变量的路径
const envPath = path.resolve(__dirname, envfile);
// env对象
const envObj = parse(fs.readFileSync(envPath, "utf8"));
console.log("envObj", envObj);
const SERVER_ID = parseInt(envObj["VUE_APP_SERVER_ID"]);

function parse(src) {
  // 解析KEY=VAL的文件
  const res = {};
  src.split("\n").forEach((line) => {
    // matching "KEY' and 'VAL' in 'KEY=VAL'
    // eslint-disable-next-line no-useless-escape
    const keyValueArr = line.match(/^\s*([\w\.\-]+)\s*=\s*(.*)?\s*$/);
    // matched?
    if (keyValueArr != null) {
      const key = keyValueArr[1];
      let value = keyValueArr[2] || "";

      // expand newlines in quoted values
      const len = value ? value.length : 0;
      if (len > 0 && value.charAt(0) === '"' && value.charAt(len - 1) === '"') {
        value = value.replace(/\\n/gm, "\n");
      }

      // remove any surrounding quotes and extra spaces
      value = value.replace(/(^['"]|['"]$)/g, "").trim();

      res[key] = value;
    }
  });
  return res;
}
// console.log('SERVER_ID',SERVER_ID);
/*
 *定义多个服务器账号 及 根据 SERVER_ID 导出当前环境服务器账号
 */

const SERVER_LIST = [
  {
    id: 1,
    name: "测试服务器",
    domain: "xxx",
    host: "xxx.xxx.xx.xx",
    port: 22202,
    username: "root",
    password: "xxxxxxx",
    path: "/www/wwwroot/xxxxxxxxx",
  },
];
module.exports = SERVER_LIST[SERVER_ID];

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
要在Vue项目中配置反向代理,首先需要使用Vue CLI进行打包。Vue CLI是一个用于快速搭建Vue项目的工具,它提供了一些默认的配置文件和命令。以下是步骤: 1. 安装Vue CLI:通过npm全局安装Vue CLI的最新版本,命令是 `npm install -g @vue/cli` 2. 创建Vue项目:使用Vue CLI创建一个新的Vue项目,命令是 `vue create project-name`,其中project-name是你想要给项目起的名字。 3. 安装依赖:进入项目目录,运行 `npm install` 安装项目所需的依赖包。 4. 配置反向代理:在项目根目录中找到vue.config.js文件,如果没有就手动创建一个。在vue.config.js文件中添加以下代码: ```javascript module.exports = { devServer: { proxy: { '/api': { target: 'http://localhost:3000', // 目标服务器地址 ws: true, changeOrigin: true }, '/foo': { target: 'http://localhost:8080', ws: true, changeOrigin: true } } } } ``` 上述配置的意义是将以`/api`开头的请求代理到`http://localhost:3000`上,将以`/foo`开头的请求代理到`http://localhost:8080`上。你可以根据实际需求调整配置。 5. 重新启动项目:运行`npm run serve`重新启动项目,在开发环境中进行测试,代理请求会被转发到目标服务器。 6. 打包上线:当项目开发完成后,可以通过运行`npm run build`来进行项目打包。打包完成后,将生成的dist目录中的文件部署服务器上即可实现项目的上线。 以上就是使用Vue CLI配置反向代理的步骤。通过反向代理,我们可以在开发环境中轻松模拟后端接口,便于前端开发与后端接口的对接工作。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值