解决vue-router history模式和跨域代理 部署到IIS时404的一些问题

先解决history模式的问题：

1. 安装IIS UrlRewrite
2. 在网站根目录中创建web.config文件，内容如下：

  
    
      
        
           //通配所有连接
          
            
            
          
          //因为是单页面，所以将所有连接重定向到 “/”，就是指向我们项目中的首页
           
        
      
    
  

以上配置完其实可以在IIS界面中看到：

好了以上解决了路由404的问题，但发现接口不能访问，导致页面没有数据了，为了解决跨域的问题我在vue中是这么配置的：

module.exports = {
  devServer:{
    proxy:{
      '/api':{
        target:'http://www.test.com',
        changeOrigin:true,
        ws:true,
        pathRewrite:{'^/api':'' }
      }
    }
  }
 }

所以依照刚刚在web.config中配置的内容，所有访问/api/XXXX的链接都会指向“/”，这就有问题，所以要给IIS配置反向代理：

1. 下载安装ARR（Application Request Routing）
2. 按照下图依次点击红框
   
   
   
   
   
   
   3.回到我们的网站，打开URL重写，添加新的规则
   
   
   
   
   
   填写正则表达式 ^(api)(.*)$ 通配所有api的链接

条件输入： {HTTP_POST} 模式：^localhost:8022$ 这里是你要发布的域名

这里填写接口所在域名，{R:2}表示后面所带的参数

The End!