vue.config.js & IIS Url重写

有参考 https://www.cnblogs.com/zhangqibao/p/12766565.html

背景: 前端Vue项目 端口为80 ,后端Python.exe 端口为5000  跑Api项目

1.Vue.config.js 配置了代理转发的目标地址,但只能在Dev环境下使用。在生产环境部署使用IIS时,需要使用URL 重写 和Application 

//直接把dists丢进IIS
//proxyObj设置代理

let proxyObj={}

proxyObj['/']={
    //websocket
    ws:false,
    //target address
    target:'http://localhost:5000',
    //发送请求头host设置为target
    changeOrigin: true,
    //不重写请求地址
    pathRewrite:{
        '^/':'/'
    }
}

module.exports = {
    outputDir: 'dists',
    publicPath:'./',
    assetsDir: "./static",
    indexPath: './index.html',
    devServer: {
        open: true,
        inline: true,
        host: '0.0.0.0',
        disableHostCheck: true,
        port: 80,
        proxy: proxyObj
    }
};
Vue.config.js

2.配置IIS 请求代理

下载 URL Rewrite

下载 Application Request Routing

3.启用ARR

(1)进入ARR设置

 

(2)进入代理设置

 

 (3)启用代理

 

4.URL重写设置

1.选中对应的Web站点 点击Url重写

 

 

 

2.添加规则 空白 规则

.

 3.使用正则表达式  填上模式与重写的url

4.所有Vue的Api请求到80端口的带有api的请求都会被打到5000端口。

R:N的例子 具体可以用测试模式进行测试

比如有个请求  http://192.168.1.100:8080/Home/TestUrlRewrite

{R:0}上面有说过表示的是全部的内容,{R:1}捕获到的是http://192.168.1.100:8080,{R:2}捕获到的反向引用是/TestUrlRewrite

posted @ 2022-04-14 08:57  最爱吃汤圆27  阅读(680)  评论(0编辑  收藏  举报