利用Vue CLI搭建代理服务

一、首先安装Nodejs

http://nodejs.cn/download/

默认安装就可以了

安装后，在控制台输入 一下命令可以查看安装的版本

node -v

二、安装Vue CLI

使用淘宝镜像【提高下载速度】

npm install -g cnpm --registry=https://registry.npm.taobao.org

安装到全局【Nodejs的安装目录下】

cnpm install -g @vue/cli

三、创建一个代理的项目

我这里是直接在上面这个目录下创建了一个叫test的项目，命令如下

 

vue create test

执行结果如下：

生成的项目如下：

在该项目的根目录下，创建一个vue.config.js文件 ，然后做相应的配置

文件内容如下：

module.exports = {
  //baseUrl: "./", //配置打包时的相对路径
  lintOnSave:false,
  devServer: {
    port: "8000", //代理端口
    open: true, //项目启动时是否自动打开浏览器，我这里设置为false,不打开，true表示打开
    proxy: {
      '/eb-km-server': { //代理api

        changeOrigin: true,
        target: "http://172.10.1.1:8080",
        ws: true, // proxy websockets
        pathRewrite: { //重写路径
          "^/eb-km-server": '/eb-km-server'
        },
        onProxyReq(proxyReq, req, res) {
          originHost = req.headers['x-forwarded-for']
          const cookie = req.headers['cookie']
          if (cookie) {
            proxyReq.setHeader('cookie', cookie)
          }
        },
        onProxyRes(proxyRes, req, res) {
          
        }
      },
      '/eb-ps-server': { //代理api

        changeOrigin: true,
        target: "http://172.10.201.40:9080",		
        ws: true, // proxy websockets
        pathRewrite: { //重写路径
          "^/eb-ps-server": '/eb-ps-server'
        },
        onProxyReq(proxyReq, req, res) {
          originHost = req.headers['x-forwarded-for']
          const cookie = req.headers['cookie']
          if (cookie) {
            proxyReq.setHeader('cookie', cookie)
          }
        },
        onProxyRes(proxyRes, req, res) {
          
        }
      },
      '/ea-server': { //代理api

        changeOrigin: true,
        target: "http://172.10.201.40:9080",
        ws: true, // proxy websockets
        pathRewrite: { //重写路径
          "^/eb-ps-server": '/eb-ps-server'
        },
        onProxyReq(proxyReq, req, res) {
          originHost = req.headers['x-forwarded-for']
          const cookie = req.headers['cookie']
          if (cookie) {
            proxyReq.setHeader('cookie', cookie)
          }
        },
        onProxyRes(proxyRes, req, res) {
          
        }
      }
    }
  }
}

 

在创建的test工程目录下执行以下命令，就可以启动代理服务了

npm run serve

界面如下：