如何处理vue 使用proxyTable之后处理开发环境和生产环境路径问题

第一步.  修改vue ---config --- index.js    dev中的内容

pathRewrite 重写 是为了在请求时baseUrl是显示为loacalhost:8080/   而不是loacalhost:8080/food

dev: {

    // Paths
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',
    proxyTable: {
      '/food': {
        logLevel: `debug`,
        changeOrigin: true,
        pathRewrite: {
          '^/food': '/'
        },
        target: 'http://192.168.23.23:8080',
      },
    },

    // Various Dev Server settings
    host: 'localhost', // can be overwritten by process.env.HOST
    port: 8080, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined
    autoOpenBrowser: false,
    errorOverlay: true,
    notifyOnErrors: true
...
}

第二步.  在axios处理请求的baseUrl

判断当前环境是 开发环境（development）还是生产环境（production），开发环境带上 ‘/food’ 走proxy代理，生产环境不走代理，为空

const baseUrl = (process.env.NODE_ENV === 'development') ? '/food' : ' '

const baseUrl = (process.env.NODE_ENV === 'development') ? '/food' : ''
const service = axios.create({
  baseURL: baseUrl, // api 的 base_url
  timeout: Config.timeout
})

第三步.  实际请求

axios.get('/user?ID=12345').then(...) // 地址为接口地址