VueCLI中的Proxy配置详解

Vue CLI 3.0 中的 Proxy 使用方法

在 Vue CLI 3.0 中，可以通过配置 vue.config.js 文件来设置代理服务器，以解决开发环境下的跨域问题。具体配置如下：

// vue.config.js
module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'http://192.168.1.22:18308', // 后台接口地址
        ws: true, // 是否代理 WebSocket
        secure: false, // 如果是 HTTPS 接口，需设置为 true
        changeOrigin: true, // 是否允许跨域
        pathRewrite: { '^/api': '' } // 路径重写规则
      }
    }
  }
}

Vue CLI 2.0 中的 Proxy 使用方法

在 Vue CLI 2.0 中，通过配置 config/index.js 文件中的 proxyTable 属性来实现代理。具体配置如下：

// config/index.js
module.exports = {
  // ...其他配置
  proxyTable: {
    '/api': {
      target: 'http://192.168.1.22:18308',
      pathRewrite: { '^/api': '/' },
      changeOrigin: true
    }
  }
}

其他配置文件

dev.env.js

这是开发环境的配置文件，用于定义一些开发环境特有的变量。

'use strict'
const merge = require('webpack-merge')
const prodEnv = require('./prod.env')

module.exports = merge(prodEnv, {
  NODE_ENV: '"development"',
  ADMIN_SERVER: '"/api/"'
})

config - index.js

这是项目的主配置文件，包含了一些路径和其他配置项。

// Paths
module.exports = {
  assetsSubDirectory: 'static',
  assetsPublicPath: '/',
  proxyTable: {
    '/api': {
      target: 'http://192.168.1.22:18308',
      pathRewrite: { '^/api': '/' },
      changeOrigin: true
    }
  }
}

config - prod.env.js

这是生产环境的配置文件，用于定义生产环境特有的变量。

'use strict'

module.exports = {
  NODE_ENV: '"production"',
  BASE_API: '"http://202.175.236.125:18308"' // 生产环境的 API 地址
}