记录一下iis上某个域名下发布多个vue项目的过程,主要分为webpack打包前的配置iis重定向的配置

vue打包配置:

1、在webpack 配置文件中(以vue.config.js为例),指定输出目录publicPath ,名称为你服务器上的二级目录,此处以 hcd 为例

  1. module.exports = {
  2. publicPath: '/hcd/',
  3. }

2、路由配置

在vueRouter中设置base基础路由,名称为二级目录名称

  1. const router = new VueRouter({
  2. mode: 'history', // 此处路由为history模式,hash模式同理,只是服务器重定向设置有区别
  3. base: baseUrl,
  4. routes
  5. })

3、在index.html中添加如下代码,base为二级目录

  1. <meta base="/hcd/">

配置完后进行npm打包即可,然后将打包好的dist文件夹中的文件发布到iis服务器即可。

如果路由是hash模式不需要配置重定向,history则按如下配置

服务器重定向配置:

1、在iis中安装重定向模块

2、重定向配置

可以iis可视化界面配置,也可以直接以web.config文件的形式配置,此处以web.config配置文件的形式配置。

规则的排序将影响到重定向的最终结果,一般按照有小到大的顺序,即匹配到最多的url放在最下面,如以下代码中的第二个 rule

  1. <?xml version="1.0" encoding="UTF-8"?>
  2. <configuration>
  3. <system.webServer>
  4. <staticContent>
  5. <mimeMap fileExtension=".woff" mimeType="application/x-font-woff" />
  6. </staticContent>
  7. <rewrite>
  8. <rules>
  9. <rule name="hcd" stopProcessing="true">
  10. <match url="^hcd\/(.*)" />
  11. <conditions logicalGrouping="MatchAll">
  12. <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
  13. <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
  14. </conditions>
  15. <action type="Rewrite" url="/hcd/" />
  16. </rule>
  17. <rule name="Handle History Mode and custom 404/500" stopProcessing="true">
  18. <match url="(.*)" />
  19. <conditions logicalGrouping="MatchAll">
  20. <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
  21. <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
  22. </conditions>
  23. <action type="Rewrite" url="/" />
  24. </rule>
  25. </rules>
  26. </rewrite>
  27. </system.webServer>
  28. </configuration>

web.config放在一级目录即可,二级目录中不需要重定向

例如:iis某站点下有aaa、bbb两个二级目录,web.config文件和aaa 、bbb两个二级目录平级即可。

我是以虚拟目录作为二级目录

iis站点下发布多个vue项目的更多相关文章

  1. 解决微信浏览器缓存站点入口文件(IIS部署Vue项目)

    最近开发的微信公众号项目中(项目采用Vue + Vux 构建,站点部署在IIS8.5上),遇到个非常奇葩的问题,发布站点内容后,通过微信打开网址发现是空白页面(后来验证是微信浏览器缓存了入口文件-in ...

  2. win10系统本地iis或nginx服务器部署vue.js项目

    1.前端框架一般依赖node.js,我们首先要安装node.js.请参考: http://www.cnblogs.com/wuac/p/6381819.html to:安装好node.js后npm也安 ...

  3. Vue 默认IIS站点配置

    // Vue 默认IIS站点配置 module.exports = { baseUrl: '/SG/',  }

  4. vue项目Windows Server服务器部署IIS设置Url重写

    1.将vue项目使用npm run build命令打包后将dist文件夹内的文件全部拷贝到服务器. 2.IIS添加应用程序池,.NET CLR版本选择无托管代码 3.添加网站,应用程序池选择刚刚添加的 ...

  5. vue项目部署到IIS服务器上

    前端Vue项目需要部署到IIS服务器上: 准备工作: 1:部署IIS服务器 2:项目npm run build打包生成需要部署的文件(dist文件夹)我的是manage文件夹 开始部署: 1:复制文件 ...

  6. 【Vuejs】335-(超全) Vue 项目性能优化实践指南

    点击上方"前端自习课"关注,学习起来~ 前言 Vue 框架通过数据双向绑定和虚拟 DOM 技术,帮我们处理了前端开发中最脏最累的 DOM 操作部分, 我们不再需要去考虑如何操作 D ...

  7. 在IIS站点中Adomd.net集成认证账号问题

    最近在做一个Asp.net项目的时候 ,在C#代码里面用到了Adomd.net去连接SSAS服务器做MDX查询,开发完成后将Asp.net代码部署到IIS后发现Adomd.net老是连接不到SSAS服 ...

  8. 为 VUE 项目添加 PWA 解决发布后刷新报错问题

    为什么要给 VUE 项目添加 PWA 为什么要添加?因为不管是部署在 IIS,还是 nginx,每次应用部署后,再次访问因为旧的 js 已经不存在,所以页面访问的时候会整个报错,报错的结果就是一个白屏 ...

  9. Visual studio 调试发布到IIS站点方式一

    在项目开发过程中,前端项目可能调用多个API接口,并且这些API接口是在同一个资源解决方案下的,一个资源解决方案下只能设置一个启动项目.那么问题来了,某个API业务需求变更或有BUG,解决后是需要调试 ...

随机推荐

  1. Shell学习(一)——Shell简介

    参考博客: [1]Shell简介

  2. Java Web 实现Mysql 数据库备份与还原

    前段时间某某删库事故付出的惨重代价告诉我们: 数据备份的必要性是企业数据管理极其重要的一项工作. 1. Mysql备份与还原命令 备份命令: mysqldump -h127.0.0.1 -uroot ...

  3. spring boot集成mybatis框架

    概述 中文官网:http://www.mybatis.cn 参考教程:https://www.w3cschool.cn/mybatis MyBatis Plus:http://mp.baomidou. ...

  4. ActiveRecord教程

    (一.ActiveRecord基础) ActiveRecord是Rails提供的一个对象关系映射(ORM)层,从这篇开始,我们来了解Active Record的一些基础内容,连接数据库,映射表,访问数 ...

  5. 【Linux】【Shell】【text】awk

    基本用法:gawk [options] 'program' FILE ...             program: PATTERN{ACTION STATEMENTS}               ...

  6. Mockito 简介

    Mockito 是一种 Java Mock 框架,主要是用来做 Mock 测试,它可以模拟任何 Spring 管理的 Bean.模拟方法的返回值.模拟抛出异常等等,在了解 Mockito 的具体用法之 ...

  7. 最基础前端路由实现,事件popstate使用

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  8. Linux下安装数据库sqlite3

    目录 一.简介 二.安装 三.测试 一.简介 SQLite 是一个软件库,实现了自给自足的.无服务器的.零配置的.事务性的 SQL 数据库引擎.SQLite 是在世界上最广泛部署的 SQL 数据库引擎 ...

  9. Android Service VS AsyncTask VS Thread

    这三种方式的设计目的是不同的. Service: 适用于在后台长期持续运行的动作,如:播放音乐,查看网络数据.注意,在开发文档中,service本身是在UI线程中,所以所需的操作应该创建一个新的线程来 ...

  10. [BUUCTF]REVERSE——内涵的软件

    内涵的软件 附件 例行检查,32位程序 32位ida载入,shift+f12检索程序里的字符串 看到一个很像flag的字符串,拿去尝试一下,成功 flag{49d3c93df25caad8123213 ...