如何解决VUE项目在IIS部署时遇到的棘手问题？

本文共计597个文字，预计阅读时间需要3分钟。

VUE项目部署到IIS站点及站点应用，由于考量，未采用Nginx转发时，仅使用IIS平台功能解决以下问题：问题1：部署后请求跨域解决方案：我的项目中，因某些原因，未使用Nginx转发。部署到IIS站点后，请求出现跨域问题。解决方法如下：

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

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

问题1：部署到站点后请求跨域 解决方案：

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

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

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

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

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

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应用就可以正常使用了，而且不影响本地开发。