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應用就可以正常使用了，而且不影響本地開發。