iis站点下发布多个vue项目

2022 年 1 月 4 日
笔记
iis, VUE, vue日常问题记录

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

vue打包配置：

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

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

2、路由配置

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

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

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

<meta base="/hcd/">

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

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

服务器重定向配置：

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

2、重定向配置

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

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

<?xml version="1.0" encoding="UTF-8"?>
<configuration>
  <system.webServer>
    <staticContent>
        <mimeMap fileExtension=".woff" mimeType="application/x-font-woff" />
    </staticContent>
    <rewrite>
      <rules>
        <rule name="hcd" stopProcessing="true">
          <match url="^hcd\/(.*)" />
          <conditions logicalGrouping="MatchAll">
            <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
            <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
          </conditions>
          <action type="Rewrite" url="/hcd/" />
        </rule>
          
        <rule name="Handle History Mode and custom 404/500" stopProcessing="true">
          <match url="(.*)" />
          <conditions logicalGrouping="MatchAll">
            <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
            <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
          </conditions>
          <action type="Rewrite" url="/" />
        </rule>
      </rules>
    </rewrite>
  </system.webServer>
</configuration>

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

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

Tags: iis VUE vue日常问题记录