vue-cli代理開發

如何設置接口代理？

　一、找到config文件下的index.js

　二、找到dev里面的proxyTable他的值就是一個{}，這里為了方便配置配置文件單獨寫成一個文件

dev: {
    env: require('./dev.env'),
    port: 8080,
    autoOpenBrowser: true,
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',
    proxyTable: proxyConfig.proxyList,
    cssSourceMap: false
  }

　三、配置proxyConfig文件

module.exports = {
  proxyList: {
	'/consumerRecord/getAll':{
	    target: 'http://10.10.10.10：8080',
	    pathRewrite: {
	      '^/consumerRecord/getAll': '/consumerRecord/getAll'
	    }
	}
  }
}

　四、訪問localhost:8080/consumerRecord/getAll就相當於訪問下面地址

http://10.10.10.10：8080/consumerRecord/getAll

這樣用代理就解決了開發中跨域的問題，當然可以直接proxyTable后面寫（但是不建議） 比如：

proxyTable: {
	'/consumerRecord/getAll':{
	    target: 'http://10.10.10.10：8080',
	    pathRewrite: {
	      '^/consumerRecord/getAll': '/consumerRecord/getAll'
	    }
	}
  }

　五、代理其實是利用的就是 http-proxy-middleware 插件完成的；

   擴展：

• vue-cli中用到的插件還有：
• 進行域名/接口代理，避免出現跨域的障礙。
• webpack-hot-middleware
• 監測文件變動，將打包的文件寫入內存中。
• html-webpack-plugin
• 創建調用webpack bundles的html文件。在每次編譯后，會為文件名加上hash值。
• webpack-hot-middleware
• 增量的修改瀏覽器，實現無刷新更新