vue-cli代理开发

Posted 2020-09-02 Rain-Heart

如何设置接口代理？

　一、找到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
• 增量的修改浏览器，实现无刷新更新