前言

最近做项目发现经常需要连接不同的后端地址进行联调，每次切换环境联调都要手动去修改vue.config.js下的devServer代理的环境，毕竟咱是一个码农，码农进步的本质是如何想办法让自己偷懒，于是就寻思着写个脚本，自动帮我替换devserver的代理地址。

实现

其实也非常简单，本质上就是文件的读取，字符串的查找， 字符串的替换；废话不多说，直接上代码； 在vue.config.js的同级目录下建立一个startDevConf.js文件；如下图所示；

startDevConf.js的代码内容如下：

// import fs from "fs"; // vite写法
// import inquirer from "inquirer"; // vite写法

const fs = require('fs') // webpack写法
const inquirer = require('inquirer') // webpack写法

// 后端的服务选项
const choices = [
  {
    name: '线上',
    value: "\t\t\t\ttarget: 'http://js33333.com:8080',",
  },
  {
    name: '本地',
    value: "\t\t\t\ttarget: 'http://124.220.191.166:8080',",
  },
  {
    name: '王二',
    value: "\t\t\t\ttarget: 'http://22.22.22.22:2222',",
  },
  {
    name: '麻子',
    value: "\t\t\t\ttarget: 'http://55.55.55.55:5555',",
  },
]

// 在读取到的vue.config.js文件字符串中寻找target行的数据
function findProxyTarget(file) {
  let fileArr = file.split('\n') // 把文件字符串根据换行符转成数组
  let proxyTarget = '' // 请求转发代理那一行的数据容器
  for (let i = 0; i < fileArr.length; i++) { // 通过循环找到对应行
    if (fileArr[i].includes('target:')) {
      proxyTarget = fileArr[i] // 赋值一下，找到了
      break
    }
  }
  // 把找到的这一行数据吐出去
  return proxyTarget // target: 'http://33.33.33.33:3333',
}

async function selectServe() {
  try {
    const choose = await inquirer.prompt([
      {
        type: 'list',
        name: 'serve',
        message: '请选择开发环境下需要连接的后端服务',
        choices,
        default: choices[0].value
      }
    ])
    let file = fs.readFileSync('./vue.config.js', 'utf-8') // 读取vue.config.js文件
    let proxyTarget = findProxyTarget(file) // 找到proxy跨域代理请求转发target行的数据
    const newFile = file.replace(proxyTarget, choose.serve) // 换成我们新选的后端服务地址
    fs.writeFileSync('./vue.config.js', newFile) // 写入更新vue.config.js文件即可
  } catch (error) {
    console.log(`报错了--->: ${error}`)
  }
}
selectServe()

接着在package.json的dev启动命令行加上"node ./startDevConf.js就行了，请看截图；

最后让我们来启动试一试吧，执行npm run dev，控制台终端就会出现如下图的界面，就表示我们成功啦，选择自己目标环境就可以啦。

总结

主要就是node文件读取 还有inquirer.js这个库的使用，亦菲彦祖们是不是超级简单呀，觉得我分享的有价值的话就点个赞吧。