VUE项目部署到IIS站点及站点内应用

由于各种考量，未采取Nginx做转发时，只使用IIS平台本身的功能解决以下问题

问题1：部署到站点后请求跨域

解决方案：

我的项目中，由于一些原因，接口前都有"/api"。例如请求A控制器A方法时，请求地址为："/api/A控制器/A方法"，本地开发时，我会在vue.config.js中添加以下配置解决跨域问题。

module.exports = {
    devServer: {
        open: true,
        proxy: { 
            '/api': {
                target: 'https://XXX.com.cn/XXX_test',//测试接口
                //target:'http://localhost:4540/',//本地调试
                ws: true,
                secure: false, 
                changOrigin: true,  
                pathRewrite: {
                    '^/api': ''  //把'/api'去除
                }
            }
        }
    }
}

在IIS中解决的方式其实原理相同。

安装Application Request Routing和URL Rewrite两个扩展模块。

https://www.iis.net/downloads/microsoft/application-request-routing

https://www.iis.net/downloads/microsoft/url-rewrite

开启Application Request Routing功能

按以下顺序开启功能后，并应用。

编写URL转发规则

在部署的站点下进入URL重写模块

点击添加规则—空白规则

在匹配URL中添加：

请求的URL："与模式匹配"

使用："通配符"

模式 ："*/api/*"

之后点击“测试模式”，模拟调用"/api/A控制器/A方法"，可以看到抓取到的各种占位符。其中{R:2}是我们需要的。

继续配置，"条件"和"服务器变量"不用更改。

”操作“配置 为：

最后在右侧应用修改即可。

问题2：如何部署到站点下的应用

通过以上配置，我们成功将VUE项目部署到IIS站点，但是部署到站点下的应用还是无法使用。

例如站点下的应用名称为demo，我们要在VUE项目中做以下配置

修改vue.config.js

添加以下语句

publicPath: process.env.NODE_ENV === "production" ? "/demo/" : "/",

修改路由配置

不管是Hash模式还是WebHistory模式，在Create时添加

process.env.NODE_ENV === "production" ? "/demo/" : "/"

例如：

const router = createRouter({
	routes,
	history: createWebHistory(
		process.env.NODE_ENV === "production" ? "/demo/" : "/"
	  ),
});

配置之后部署在站点下的demo应用就可以正常使用了，而且不影响本地开发。