webpack中代理配置(proxyTable)

在config文件下的index.js中配置代理地址

webpack中代理配置(proxyTable)_第1张图片

 

   参考:https://vuejs-templates.github.io/webpack/proxy.html
  举例:localhost:8080 代理到 http://www.123.com/api,如图
    如果用pathRewrite重写则代理到http://www.123.com/api
  将'/api'转为'/'
  
proxyTable: {
      '/api': {// '/api':匹配项
        target: 'http://www.123.com/',// 接口的域名
     // secure: false,// 如果是https接口,需要配置这个参数
        changeOrigin: true,// 如果接口跨域,需要进行这个参数配置
     // pathRewrite: {// 如果接口本身没有/api需要通过pathRewrite来重写了地址
     //   '^api': ''
        // }


      }
    }

 

用axios请求资源

参考:https://www.npmjs.com/package/axios
//引入axios
import axios from 'axios'
export function getProductTree() {
 // 用axios.get()请求资源
  return axios.get('/api/pageblock/getProductCategoryTree')
}

页面中请求资源

import { getProductTree } from 'api/product-tree.js'

export default {
  created() {
    this._getProductTree()
  },
  methods: {
    _getProductTree() {
      // 页面加载时请求资源
      getProductTree().then(data => {
        console.log(data)
      })
    }
  }
}

 

你可能感兴趣的:(webpack,Vue)