Vue JS 刷新页面时出现 404 Not found

Question

当我刷新托管在 Azure Web APP（IIS 服务器）中的 Vue JS 应用程序中的任何页面（默认网页除外）时，我收到错误“404 未找到”index.html

\n

我已经web.config根据 VueJs 官方文档添加了这个重写配置：

\n

    <rule name="Handle History Mode and custom 404/500" stopProcessing="true">\n        <match url="(.*)" />\n        <conditions logicalGrouping="MatchAll">\n            <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />\n            <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />\n        </conditions>\n        <action type="Rewrite" url="/" />\n    </rule>                   \n

\n

这是我的web.conf文件：

\n

    <configuration>\n        <system.webServer>\n            <rewrite>\n                <rules>\n                     <rule name="Handle History Mode and custom 404/500" stopProcessing="true">\n                       <match url="(.*)" />\n                      <conditions logicalGrouping="MatchAll">\n                         <add input="{\xe2\x80\x8b\xe2\x80\x8b\xe2\x80\x8b\xe2\x80\x8b\xe2\x80\x8b\xe2\x80\x8b\xe2\x80\x8bREQUEST_FILENAME}\xe2\x80\x8b\xe2\x80\x8b\xe2\x80\x8b\xe2\x80\x8b\xe2\x80\x8b\xe2\x80\x8b\xe2\x80\x8b" matchType="IsFile" negate="true" />\n                         <add input="{\xe2\x80\x8b\xe2\x80\x8b\xe2\x80\x8b\xe2\x80\x8b\xe2\x80\x8b\xe2\x80\x8b\xe2\x80\x8bREQUEST_FILENAME}\xe2\x80\x8b\xe2\x80\x8b\xe2\x80\x8b\xe2\x80\x8b\xe2\x80\x8b\xe2\x80\x8b\xe2\x80\x8b" matchType="IsDirectory" negate="true" />\n                      </conditions>\n                      <action type="Rewrite" url="/" />\n                    </rule>\n    \n    \n                    <rule name="redirect all requests" stopProcessing="true">\n                        <match url="^(.*)$" ignoreCase="false" />\n                        <conditions logicalGrouping="MatchAll">\n                            <add input="{\xe2\x80\x8b\xe2\x80\x8b\xe2\x80\x8b\xe2\x80\x8b\xe2\x80\x8b\xe2\x80\x8b\xe2\x80\x8bREQUEST_FILENAME}\xe2\x80\x8b\xe2\x80\x8b\xe2\x80\x8b\xe2\x80\x8b\xe2\x80\x8b\xe2\x80\x8b\xe2\x80\x8b" matchType="IsFile" negate="true" pattern="" ignoreCase="false" />\n                         </conditions>\n                        <action type="Rewrite" url="index.html" appendQueryString="true" />\n                    </rule>\n                </rules>\n            </rewrite>\n        </system.webServer>\n    </configuration>\n\nthe `router.js` file have this conf : \n\n    const router = new VueRouter({\n      mode: \'history\',\n      routes: [...]\n    })\n

\n

有什么想法可以解决这个问题吗？

\n

问候

\n

编辑 ：

\n

只需添加pm2 serve /home/site/wwwroot --no-daemon --spa，在

\n

Azure Portal > App Service > Configuration > Application Setting\n

\n

基于Linux的Azure APP Service，不需要使用web.config

\n

BR。

\n

Answer 1

由于我是从顶级谷歌结果来到这里的，并且有点放弃了获得结果的旅程，所以我想将其发布在这里，希望它能对将来的人有所帮助。

我试图在生产环境中交换Vue@3应用程序local IIS之前测试它是否正常工作。我实际上是在Vue@3中重写Vue@2应用程序，对于 Vue@2，遵循这 3 个链接中的任何一个都会成功：

• https://gist.github.com/AngeloAnolin/6b19d22220b27a545e10f5fa672072fa
• https://www.linkedin.com/pulse/hosting-vue-js-spa-build-microsoft-iis-zainul-zain
• https://dnilvincent.com/blog/posts/host-vuejs-app-on-iis

然而，在Vue@3中，这有点矫枉过正，并且会抛出http error 500.19 - internal server error. 更改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>
        <modules runAllManagedModulesForAllRequests="true"/>
    </system.webServer>
</configuration>

基本上就是这样。祝一切顺利 :D