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

开发相关

代理服务使用

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重写，实现代理

URL Rewrite下载