vue study notes 11

Use webpack in devServer.proxy

Request:

proxy: {
  "/api": {
    target: "https://other-server.example.com",
    secure: false
   pathRewrite:{
     '^/api':''
    }
  }
}

target: Target interface domain name, do not bring back all of the path

 changeOrigin: whether to open proxy

pathRewrite: Rewrite path

secure: By default, do not accept to run on HTTPS, and uses a back-end server certificate is invalid. If you want to use, it is necessary to add this property. It is false.

Other Usage:
 If you do not proxy requests. The return value may be based on a function of bypass the proxy. In the function you can access the request body, response body, and proxy options. It must be returned  false or path to bypass the proxy request

Examples official website:

proxy: {
  "/api": {
    target: "http://localhost:3000",
    bypass: function(req, res, proxyOptions) {
      if (req.headers.accept.indexOf("html") !== -1) {
        console.log("Skipping proxy for browser request.");
        return "/index.html";
      }
    }
  }
}

Here we can write a function to return our virtual data

We create a file dashboard_chart.js

function chart(method) {
  let res = null;
  switch (method) {
    case "GET":
      res = [10, 20, 30, 40, 50, 60];
      break;
    default:
      res = null;
  }
  return res;
}

module.exports = chart;

Then go inside custom configuration settings vue.config.js

 

 

 Prior also wrote css turn less configuration

module.exports = {
  // 选项...
  css: {
    loaderOptions: {
      less: {
        // 这里的选项会传递给 css-loader
        javascriptEnabled: true
      }
    }
  },
  devServer: {
    proxy: {
      "/api": {
        target: "http://localhost:3000",
        bypass: function(req, res) {
          if (req.headers.accept.indexOf("html") !== -1) {
            console.log("Skipping proxy for browser request.");
            return "/index.html";
          } else {
            const name = req.path
              .split("/api/")[1]
              .split("/")
              .join("_");
            const mock = require(`./src/mock/${name}`);
            const result = mock(req.method);
            delete require.cache[require.resolve(`./src/mock/${name}`)];
            return res.send(result);
          }
        }
      }
    }
  }
};

Else processing data is determined to go, and the page write request.

   getChartData () { 
      axios.get ( '/ API / Dashboard / Chart ", the params {: {ID: 12345}}). the then (RES => {
         the this .chartOption = { 
          title: { 
            text: " Getting Started ECharts exemplary " 
          } , 
          ToolTip: {}, 
          XAXIS: { 
            Data: [ "shirt", "sweater", "chiffon shirt", "pants", "shoes", "socks" ] 
          }, 
          YAXIS: {}, 
          Series: [ 
            { 
              name: "sales" , 
              of the type: "bar" , 
              the Data: RES.data
            }
          ]
        };
      });
    }

The returned data assignment.