vue加载图片，地图，请求api跨域问题

vue加载图片，地图，请求api跨域问题通过proxy配置代理解决

1.vue.config.js文件里添加如下配置

（proxyTable在vue早期的cli2项目中使用，而proxy在vue-cli3版本以后的项目中使用）

module.exports = {
  devServer: {
  	port: 8080,
    // 配置代理核心代码 --------------- start
    proxy: {
      "/gismap": {
        target: 'http://www.baidu.com',   
        changeOrigin: true,
        ws: true,
        pathRewirte: {
          // 这里是追加链接,比如真实接口里包含了 /gismap,就需要这样配置.
          '^/gismap': ''
        },
      },
    },
    // ------------------ end
  },
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

2.当使用请求地址时：

// proxy配置代理名字 gismap + /后续路径地址
// eg: 
"url": "gismap/...xxx..."

//我们请求：http://localhost:8080/gismap/getSomething 就会被代理为：http://www.baidu.com/gismap/getSomething
1
2
3
4
5

3.打包部署后访问地址错误

报错原因：因为编译打包后，前端页面成为了单独的静态资源，代理服务器devServer.proxy被抽离出去了。也就是说，devServer.proxy不会一起打包到dist文件夹下，所以相当于我们没有配置代理服务器

解决方案：
nginx里的conf文件夹添加代理

location /gismap/ {
                        proxy_pass http://www.baidu.com;
        }
1
2
3

然后将配置文件里对应的地址前面添加服务器地址端口，eg: http://www.baidu.com/gismap/…

vue.config.js引入可配置变量

一、创建免打包配置文件文件

cli3+在public文件夹下面新建一个config.js配置文件，cli3版本以下则在static文件夹下新建即可

//其他配置文件调用
const urlConfig = {
    ip: "localhost", //前端IP地址
    port: 3000, //前端地址端口号
    baseURL: 'http://localhost:3000', //前端地址，端口号和上面保持一致
    webApiURL: 'http://localhost:7501', //访问的后端接口地址
    authorityURL: "http://localhost:7502", //Oauth单点登录地址
    version: 'V1.0', // 首页底部版本号、
    reloadTime: '10000' //  页面数据重载 (毫秒)
}

//vue.config.js调用
module.exports = urlConfig
1
2
3
4
5
6
7
8
9
10
11
12
13

二、在vue.config.js中引入

const urlConfig = require('./public/config');
const webApiURL = urlConfig.webApiURL; //访问的后端接口地址
1
2

三、在public目录下的index.html中引入配置文件

<script src="config.js" charset="utf-8"></script>
1

配置后，项目下的其他页面可以直接引用