Detailed explanation of steps to implement proxy in Vue

This time I will bring you a detailed explanation of the steps for Vue to implement proxy. What are the precautions for Vue to implement proxy? . The following is a practical case, let's take a look.

Vue Framework When developing, you will encounter cross-domain problems. You can configure the proxyTable content in config/index.js and use the proxy proxy.

// config/index.js 文件
proxyTable: {
   '/api': {
    target: 'http://192.168.149.90:8080/', // 设置你调用的接口域名和端口号
    changeOrigin: true,   // 跨域
    pathRewrite: {
     '^/api': '/'     
    }
   }
  },

This is understood as using '/api' to replace the address in the target. In the later components, when we drop the interface, we directly use api to replace it. For example, I want to call 'http://192.168.149.90:8080/xxx/duty ?time=2017-07-07 14:57:22', just write '/api/xxx/duty?time=2017-07-07 14:57:22'

In dev.env.jsConfigure the development environmentRequest address

// config/dev.env.js 文件
module.exports = merge(prodEnv, {
 NODE_ENV: '"development"',
 ADMIN_SERVER: '"/api/"',
});

If you request axios for the plug-in, configure it as follows

const adminServer = axios.create({
 baseURL: process.env.ADMIN_SERVER,
});

I believe you have read the case in this article After mastering the method, please pay attention to other related articles on the php Chinese website for more exciting content!

Recommended reading:

Detailed explanation of the steps to implement vue multi-page development and packaging

Detailed explanation of the use of .sync modifiers in vue

The above is the detailed content of Detailed explanation of steps to implement proxy in Vue. For more information, please follow other related articles on the PHP Chinese website!