利用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

界面如下：