vue-cli构建脚手架并配置代理解决跨域问题

注:只针对开发环境

项目脚手架由vue-cli构建,

1、修改config/dev.env.js,添加:VUE_APP_BASE_API

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

2、修改config/index.js,修改proxyTable属性

proxyTable: {
  '/api': { //类似nginx的location配置
    target: 'http://127.0.0.1:8087', //需要代理到的api服务地址
    changeOrigin: true, //是否跨域
    pathRewrite: {
      '^/api': '/'  //默认在转发时会给api接口带上'/api',如果api服务器,没有'/api'前缀,设置为''或者'/';如果有前缀,则可以去掉
    }
  }
}

3、创建axios对象时的配置:

const service = axios.create({
  baseURL: process.env.VUE_APP_BASE_API,  
  timeout: 5000 // request timeout
})