05 使用 vue cli build 后，部署 iis 代理

开发相关

代理服务使用

vue.config.js

  devServer: {
    // /*       port: 端口号, */
    proxy: {
      '/Development': {
        target: 'http://xxx.xx.xx.xx/WebApi/api/',
        ws: true,  // proxy websockets 
        changeOrigin: true,  // needed for virtual hosted sites
        pathRewrite: {
          '^/Development': ''  // rewrite path
        }
      },
    }
  }

webapi.js

// 创建 axios 实例
const service = axios.create({
  baseURL: '/Development/', // api base_url
  timeout: 6000, // 请求超时时间
})

//登录
export function login (parameter) {
  return service({
    method: 'post',
    url: '/Power',
    data: {
      username: parameter.User_Account,
      password: parameter.User_Pwd,
      operate_Type: 'Login',
    }
  })
}

部署相关

打包

vue-cli-service build

打包后文件目录

默认端口直接部署 404

iis下，默认端口直接添加应用程序指向打包路径

部署目录
资源无法找到

新建网站，刷新后，404

iis下，新建网站指向打包路径，初始加载正常，F5刷新后，404

初始加载
刷新404

参考添加 Vue Router，添加 web.config

image.png
Vue Router后端配置例子
添加后，初次加载、刷新路径资源均正常加载，请求服务 405
405

修改 IIS URL重写，实现代理

<?xml version="1.0" encoding="UTF-8"?>
<configuration>
  <system.webServer>
    <rewrite>
      <rules>
        <rule name="WebApi" stopProcessing="true"> 
          <match url="^/?Development/(.*)$" />
          <conditions logicalGrouping="MatchAll" trackAllCaptures="false"> 
            <add input="{PATH_INFO}" pattern="^/?Development/" />
          </conditions> 
          <action type="Rewrite" url="http://xxx.xx.xx.xx/WebApi/api/{R:1}" appendQueryString="true" redirectType="Temporary" /> 
        </rule> 

        <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>

URL Rewrite下载