Vue 代理配置

vue proxyTable接口跨域請求調試

在Vue-cli項目中的config文件夾下面有三個JS文件, 首先 ,在 index.js中的Dev{  }中做如下配置

proxyTable: {
      '/api': {
        target: "http://www.baidu.com", // API服務所在IP及端口號
        changeOrigin: true, // 如果設置為true,那么本地會虛擬一個服務器接收你的請求並代你發送該請求，這樣就不會有跨域問題（只適合開發環境）
        pathRewrite: {
          '^/api': '' // 重寫路徑
        }
      }
    },

　　然后,配置開發環境 , 即在 dev.env.js中配置

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

module.exports = merge(prodEnv, {
  NODE_ENV: '"development"',
  BASE_API: '"http://www.baidu.com"' //配置為本地地址才會訪問到本地虛擬的服務器，從而通過第1步中代理訪問API服務，避免跨域 })

　　最后 ,配置生產環境 ,即在prod.env.js中配置

'use strict'
module.exports = {
  NODE_ENV: '"production"',
  BASE_API: '"http://www.baisu.com"' //產品環境
}

　　接下來,在組件中調用后台接口

axios({
        method: "get",
        url: "api/getdata",  //使用 api+具體接口路徑 
        params: {
          id:1
        }
      }).then(function(res) {
        console.log(res)
        })

最后,最最最重要 的一點, 一定要重新啟動項目 npm run dev , 才會起作用吶 !