iis站点下发布多个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两个二级目录平级即可。

巴特西

iis站点下发布多个vue项目

vue打包配置：

服务器重定向配置：

最新文章

热门文章