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日常問題記錄