在 IIS 下服务的 Vue.js 无法找到资产文件

Question

更新

在深入挖掘之后，我认为这个问题与引用 CSS 文件等资产的事实有关，例如href="/css/style.css" IIS 将通过导航到服务器的根文件夹而不是 应用程序的 根文件夹来解决它，例如本地主机/myapp/css/style.css。然而，它似乎只发生在运行 Vue 应用程序时，当我在它自己的应用程序中“部署”原始 html 文件时，CSS 和 JS 文件路径被正确解析。

原帖

我在 Vue.js 中使用 vue-router 开发了一个示例待办事项应用程序。使用 VUE CLI 提供服务时，它按预期工作，但是当我从 dist 文件夹中构建文件并将其放在 IIS 应用程序下时，我收到错误消息，表明服务器尝试在以下位置查找资产文件（例如 css 和 js） localhost 根目录，而不是 localhost/todos。错误示例：

 http://localhost/css/app.45a2082d.css net::ERR_ABORTED 404 (Not Found)
 http://localhost/js/app.34c2e8cc.js net::ERR_ABORTED 404 (Not Found)

我按照官方网站上指定 here 的 IIS 的步骤进行操作，即安装了 IIS UrlRewrite 并包含了 web.config，但是我得到了相同的结果。包含的 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>

作为一种解决方法，我尝试创建一个新的 ASP.Net 核心应用程序。我将所有构建的资产文件，包括 index.html 放在 wwwroot 文件夹下，并在 Startup.cs 中添加了以下中间件：

app.UseFileServer();
app.Run(async (context) => {
    await context.Response.SendFileAsync(env.ContentRootPath + "/wwwroot/index.html");
});

这在通过 IIS Express 启动时按预期工作，即它加载 index.html 文件，该文件又正确加载所有其他资产。路线工作正常，因为我能够在页面/路线（主页和关于）之间切换。但是，当我发布此 Web 应用程序并将其放在带有更新的 web.config 文件（上述 URL 重写规则 + .Net Core 特定配置）的 IIS 下时，我遇到了同样的问题 - IIS 似乎尝试从根目录加载资产本地主机位置。

我如何告诉 IIS 在应用程序的根位置（即 iinetpub\wwwroot\Todos）而不是 localhost 的根位置查找资产文件？

我构建的 dist 文件和目录如下所示：

• index.html
• css/app.45a2082d.css
• js/app.34c2e8cc.js

vue-router 配置：

export default new Router({
    mode: "history",
    routes: [
        {
            path: "/",
            name: "home",
            component: Home
        },
        {
            path: "/about",
            name: "about",
            component: About
        }
    ]
});

我是否在 IIS 配置中遗漏了其他内容？为什么它可以在 IIS Express 下工作，但不能在系统的 IIS 下工作？是其他地方的问题吗？

Answer 1

原来我必须配置 Vue 来设置 baseUrl 并匹配应用程序的路径。在 vue.config.js 中：

module.exports = {
    baseUrl: '/todos'
};