鍍金池/ 問答/Linux  HTML  Office/ vue-router history 模式 iis 多層目錄配置問題

vue-router history 模式 iis 多層目錄配置問題

目前：
localhost:80/index
localhost:80/login
這類頁面都沒有問題，刷新當(dāng)前頁可以顯示對應(yīng)頁面；

web.config

<?xml version="1.0" encoding="UTF-8"?>
<configuration>
  <system.webServer>
    <rewrite>
      <rules>
        <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>

但是當(dāng)目錄有2層的時候，就會出現(xiàn)頁面空白
例如：
localhost:80/index 可以通過菜單跳轉(zhuǎn)到 localhost:80/list/page,
頁面能正常顯示，但是刷新當(dāng)前頁面，就空白了
控制臺報錯：Uncaught SyntaxError: Unexpected token <

回答
編輯回答
尕筱澄

已解決.
webpack.prod.config.js
publicPath:'http://.....'
寫服務(wù)器地址就好了

2018年2月10日 05:44
編輯回答
心癌

我同樣遇到這個問題

實際訪問的Url: http://127.0.0.1/Dev/Web/
我的解決方式:
  1. 先安裝以下IIS插件 下載
  2. 配置Web.config
  3. 修改vue代碼router
//eb.config
<?xml version="1.0" encoding="UTF-8"?>
<configuration>
    <system.webServer>
        <rewrite>
          <rules>
            <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="./index.html" />
                </rule>
            </rules>
        </rewrite>
        <httpErrors>     
            <remove statusCode="404" subStatusCode="-1" />                
            <remove statusCode="500" subStatusCode="-1" />
            <error statusCode="404" path="/survey/notfound" responseMode="ExecuteURL" />                
            <error statusCode="500" path="/survey/error" responseMode="ExecuteURL" />
        </httpErrors>
        <modules runAllManagedModulesForAllRequests="true" />
    </system.webServer>
</configuration>
//vue main.js代碼
export const router = new VueRouter({
    mode: 'history',
    base: '/Dev/Web/',
    routes:[{
        path: '/index.html',
        component: login
    },{
        path: '*',
        component: P404
    }]
});
2017年6月18日 04:05