解决vue-router history模式和跨域代理部署到I

2019-03-14 本文已影响0人 xuehairong

先解决history模式的问题：

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

<?xml version="1.0" encoding="UTF-8"?>
<configuration>
  <system.webServer>
    <rewrite>
      <rules>
        <rule name="Handle History Mode and custom 404/500" stopProcessing="true">
          <match url="(.*)" /> //通配所有连接
          <conditions logicalGrouping="MatchAll">
            <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
            <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
          </conditions>
          //因为是单页面，所以将所有连接重定向到 “/”，就是指向我们项目中的首页
          <action type="Rewrite" url="/" /> 
        </rule>
      </rules>
    </rewrite>
  </system.webServer>
</configuration>

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

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

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

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