VUE项目部署到IIS的疑难杂症

2022-05-07 11:02:20 阅读：195 来源： 互联网

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

标签：VUE,IIS,URL,demo,疑难杂症,站点,部署,api
来源： https://www.cnblogs.com/soraxtube/p/16241547.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9