.netCore + vue(history模式) 项目整合 在IIS上的部署(无需代理)

 

  最近刚开始学习 .netcore 和Vue前后端完全分离的开发模式,开发过程中使用了devServer代理到本地的调试路径。而发布到生产环境后由于 vue 的机制所有页面都是重定向到index页面进行处理的,然而vue 路由的hash模式实在是出戏,最终还是坚持使用 history 的路由方式。下面是部署到IIS环境的方法

  一、环境

    服务器:window server2012 R2,IIS10

    后端:mysql+.netcore webapi+jwt+swgger..

    前端:vue框架 ant-design-vue-pro

  二、部署core

    这里就不在多讲,core 的部署比较简单。网上很多教程,注意在代码中开启静态文件访问 app.UseStaticFiles();

  三、部署Vue项目

    vue项目 build 出来后 放到 webapi 接口项目的 wwwroot 下面

    1.下载安装  web 平台安装程序 并在里面搜索安装 安装iis urlRewite2.0(为了使vue能够重定向到 index.html)

      安装完 web平台安装程序后 

     .netCore + vue(history模式) 项目整合 在IIS上的部署(无需代理)

 

       搜索并用 管理员身份 打开web 平台安装程序,安装 url rewrite

      .netCore + vue(history模式) 项目整合 在IIS上的部署(无需代理)

 

 

      .netCore + vue(history模式) 项目整合 在IIS上的部署(无需代理)

 

 

 

       安装完毕后,我们在对应网站 功能视图 打开url重写 ,按以下步骤操作

      .netCore + vue(history模式) 项目整合 在IIS上的部署(无需代理)

 

 

  

        .netCore + vue(history模式) 项目整合 在IIS上的部署(无需代理)

 

 

          .netCore + vue(history模式) 项目整合 在IIS上的部署(无需代理)

 

 

   2.添加 API 请求的过滤规则,(在添加重定向到index的规则前首先先对api 等一些接口url的重写,其实这里就是忽略掉api的重定向,有跟好的忽略方式请联系我 571115139@qq.com).由于这里的后端接口都是 http://域名/api/--- 的方式,所以这里直接忽略掉api开头的所有规则,注意图二的停止后续处理

.netCore + vue(history模式) 项目整合 在IIS上的部署(无需代理)

 

 

 .netCore + vue(history模式) 项目整合 在IIS上的部署(无需代理)

 

 

 不懂[R:N}什么意思的,可以看 这里 

.netCore + vue(history模式) 项目整合 在IIS上的部署(无需代理)

 

 

3.然后我们添加重定向 到index

.netCore + vue(history模式) 项目整合 在IIS上的部署(无需代理)

 

 index 规则添加,这里我们同样屏蔽掉api相关的  ^(?![api]).*$

 继续往下 添加 规则条件 ,

.netCore + vue(history模式) 项目整合 在IIS上的部署(无需代理)

 

 添加 条件

.netCore + vue(history模式) 项目整合 在IIS上的部署(无需代理)

 

 

 

 

 .netCore + vue(history模式) 项目整合 在IIS上的部署(无需代理)

 

 最后一个是为了保险排除所有 .** 文件类  .*\.[\d\w]+$

然后点击应用

网站就能正常跑起来了,同时解决了 刷新后 404的问题

 

上一篇:从零实现Linux一键自动化部署.netCore+Vue+Nginx项目到Docker中


下一篇:.NETCore中实现ObjectId反解