webpack地址代理

项目开发阶段前后端分离模式，这就涉及到了开发地址和部署地址不一样，如果前端把地址写死的话，那样每次部署都要修改地址，这样可能会导致有时候修改遗漏等问题

那么考虑下，我们在开发阶段是不是可以通过地址代理来解决前端地址写死的问题

vue2.0的webpack提供了这个功能

比如一个完整的请求地址是 http://172.31.4.247/sc1902/login/oauth/token

webpack的配置
找到config文件下的index.js文件配置代理，注意的是websocket的代理要把协议改成(ws)

dev: {
    // Paths
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',
    proxyTable: {
      '/sc1902':{
        target:'http://172.31.4.247',
        changeOrigin:true
      },
      '/sc1902/handler':{
        target:'ws://172.31.4.247',
        ws: true,
        changeOrigin:true
      },
      '/mapcache':{
        target:'http://172.31.4.247',
        changeOrigin:true
      }
    },

api的写法
axios请求的地址写法

axios.post( '/sc1902/login/oauth/token', Qs.stringify(param))
      .then(function (response) {
        
      })
      .catch(function (err) {
        
      });

websocket的写法
这里需要注意的是下面的写法

new WebSocket('/sc1902/handler')

报错 URL is invalid

解决方法如下：

new WebSocket('ws://'+location.host+'/sc1902/handler')

一个小知识点

location.host   包含端口
location.hostname   不包含端口