Vue.js под IIS не может найти файлы активов

Question

UPDATE

Пройдя немного дальше, я думаю, что проблема связана с тем фактом, что ссылки на активы, такие как файлы 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)

Я выполнил шаги для 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, который, в свою очередь, корректно загружает все остальные ресурсы. Маршруты работают правильно, так как я могу переключаться между страницами / маршрутами (Домашняя страница и О программе). Однако, когда я публикую это веб-приложение и поместил его под IIS с обновленным файлом web.config (вышеупомянутые правила перезаписи URL + специфическая конфигурация .Net Core), у меня возникает та же проблема - кажется, что IIS пытается загрузить ресурсы из корня локации localhost.

Как я могу сказать 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'
};