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
})