Vue-cli3 项目 webpack配置跨域

Vue-cli3 搭建的项目结构较为简单,去掉了之前版本的build和config文件夹

以下是我的项目结构:

Vue-cli3 项目 webpack配置跨域_第1张图片

 

那么如何利用Webpack配置跨域,只要在vue.config.js文件中加入以下配置(vue.config.js没有的话需要自己创建),配置如下:

Vue-cli3 项目 webpack配置跨域_第2张图片

8082:代表本地监听端口,可以随便写一个

api:代表路径中包含api的才映射到这个代理地址

192.168.2.1:8080:该地址是要跨域的接口地址

配置完成后,重启vue,测试如下:

  1. 在浏览器中随便先访问一个接口服务器的get请求,测试接口服务器是否正常,假设访问地址:

         http://192.168.2.1:8080/test/testServer/rest/model/deleteModel/1

    2. 用配置后的地址进行访问,此时地址变为:http://127.0.0.1:8082/api/test/testServer/rest/model/deleteModel/1

你可能感兴趣的:(vue)