Ошибка перезаписи URL VueJs при размещении на IIS с приложением ASP.net Core 2.0 - PullRequest
Новая
       43

Ошибка перезаписи URL VueJs при размещении на IIS с приложением ASP.net Core 2.0

0 голосов
/ 01 ноября 2018

Я размещаю vuejs приложение в папке WWWROOT приложения Asp.net Core 2.0.

Когда я пытаюсь запустить приложение с URL:

https://admin.myapp.com или https://admin.myapp.com/index, когда в браузере нажата https://admin.myapp.com, приложение должно быть перенаправлено на ../index, но ничего не происходит. Их всегда ниже ошибка на консоли браузера.

manifest.c93377026a31fd19d204.js:1 Uncaught SyntaxError: Unexpected token < vendor.ce0b0308730c78917196.js:1 Uncaught SyntaxError: Unexpected token < app.09cbf8437d50e73c0697.js:1 Uncaught SyntaxError: Unexpected token <

Я переписываю URL следующим образом в файлах веб-конфигурации приложения.

Web Config За пределами папки wwwroot. 

<?xml version="1.0" encoding="utf-8"?>
<configuration>
    <system.webServer>
    <rewrite>
      <rules>
        <rule name="VueJs Routes" stopProcessing="true">
          <match url="(.*)" />
          <conditions logicalGrouping="MatchAll">
            <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
            <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
            <add input="{REQUEST_URI}" pattern="^/(api)" negate="true" />
            <add input="{REQUEST_URI}" pattern="^/(account)" negate="true" />
          </conditions>
          <action type="Rewrite" url="/" />
        </rule>
      </rules>
    </rewrite>
    <handlers>
      <add name="aspNetCore" path="*" verb="*" modules="AspNetCoreModule" resourceType="Unspecified" />
    </handlers>
    <aspNetCore processPath="dotnet" arguments=".\MyApp.dll" stdoutLogEnabled="false" stdoutLogFile="C:\logs\MYApp\logs\stdout" />
  </system.webServer>
</configuration>

Мой класс запуска: 

public void Configure(IApplicationBuilder app, IHostingEnvironment env, ILoggerFactory loggerFactory)
{

    loggerFactory.AddConsole(Configuration.GetSection("Logging"));
    loggerFactory.AddDebug();
    loggerFactory.AddSerilog();

    //app.UseHangfireDashboard();
    //app.UseHangfireServer();

    if (env.IsDevelopment())
    {
        app.UseDeveloperExceptionPage();
    }

    InitializeAsync(app.ApplicationServices, CancellationToken.None).GetAwaiter().GetResult();

    app.UseCors("CorsPolicy");
    app.UseAuthentication();


    app.UseDefaultFiles();
    app.UseStaticFiles();

    //app.UseMiddleware(typeof(ErrorHandlingMiddleware));
    app.UseMvc();
}

В VueJs я использую режим history.

Это небольшой фрагмент кода, который я использую в своем Route.js 

const router = new Router({
  mode: "history",
  linkActiveClass: "open active",
  scrollBehavior: () => ({ y: 0 }),
  routes: [
    {
      path: "/",
      redirect: "/index",
      name: "Home",
      component: Full

Когда я пытаюсь просмотреть приложение, используя URL-адрес (api URL), например

https://admin.myapp.com/account/getdata https://admin.myapp.com/api/list/state

данные заполнены правильно.

Любое предложение или помощь будут оценены.

Ответы [ 2 ]

0 голосов
/ 22 ноября 2018

Я использовал приведенный ниже код в веб-конфигурации, который решил мою проблему выше. Я разместил здесь все теги в качестве ответа. Надеюсь, это поможет кому-то с подобной проблемой. 

<?xml version="1.0" encoding="utf-8"?>
<configuration>
  <system.webServer>
    <rewrite>
      <rules>
        <rule name="wwwroot-static" stopProcessing="true">
          <match url="([\S]+[.](html|htm|svg|js|css|png|gif|jpg|jpeg))" />
          <action type="Rewrite" url="wwwroot/{R:1}" />
        </rule> 

        <rule name="empty-root-index" stopProcessing="true">
          <match url="^$" />
          <action type="Rewrite" url="wwwroot/index.html" />
        </rule>

        <!-- 
             Make sure you have a <base href="/" /> tag to fix the root path 
             or all relative links will break on rewrite 
        -->
        <rule name="AngularJS-Html5-Routes" stopProcessing="true">
          <match url=".*" />
          <conditions logicalGrouping="MatchAll">
                <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
                <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
                <add input="{REQUEST_URI}" pattern="^/.well-known/openid-configuration" negate="true" />
                <add input="{REQUEST_URI}" pattern="^/.well-known/jwks" negate="true" />
                <add input="{REQUEST_URI}" pattern="^/api(.*)" negate="true" />
                <add input="{REQUEST_URI}" pattern="^/account(.*)" negate="true" />
                <add input="{REQUEST_URI}" pattern="^/connect(.*)" negate="true" />
          </conditions>
          <action type="Rewrite" url="wwwroot/index.html"  />
        </rule> 
      </rules>
    </rewrite>

    <handlers>
      <add name="StaticFileModuleHtml" path="*.htm*" verb="*" modules="StaticFileModule" resourceType="File" requireAccess="Read" />
      <add name="StaticFileModuleSvg" path="*.svg" verb="*" modules="StaticFileModule" resourceType="File" requireAccess="Read" />
      <add name="StaticFileModuleJs" path="*.js" verb="*" modules="StaticFileModule" resourceType="File" requireAccess="Read" />
      <add name="StaticFileModuleCss" path="*.css" verb="*" modules="StaticFileModule" resourceType="File" requireAccess="Read" />
      <add name="StaticFileModuleJpeg" path="*.jpeg" verb="*" modules="StaticFileModule" resourceType="File" requireAccess="Read" />
      <add name="StaticFileModuleJpg" path="*.jpg" verb="*" modules="StaticFileModule" resourceType="File" requireAccess="Read" />
      <add name="StaticFileModulePng" path="*.png" verb="*" modules="StaticFileModule" resourceType="File" requireAccess="Read" />
      <add name="StaticFileModuleGif" path="*.gif" verb="*" modules="StaticFileModule" resourceType="File" requireAccess="Read" />
      <add name="aspNetCore" path="*" verb="*" modules="AspNetCoreModule" resourceType="Unspecified" />
    </handlers>
    <aspNetCore processPath="dotnet" arguments=".\MyApp.dll" stdoutLogEnabled="false" 
                stdoutLogFile=".\logs\stdout" forwardWindowsAuthToken="false" />
  </system.webServer>
</configuration>
0 голосов
/ 05 ноября 2018

Я думаю, что проблема в том, что Vue по умолчанию предполагает, что ваше приложение размещено на базе вашего домена (https://admin.myapp.com). Но когда вы развертываете его как часть проекта ASP.NET, он оказывается в папке (https://admin.myapp.com/wwwroot). Когда запрашиваются файлы приложения, они не обнаруживаются IIS Rewrite как существующие файлы (поскольку они не относятся к базе) и перезаписываются в index.html.

Попробуйте изменить значение baseUrl в конфигурации Vue на '/wwwroot/'.

(ПРИМЕЧАНИЕ. У приложения, над которым я работаю, фактически был отдельный проект / сайт API, поэтому я решил просто разместить внешний интерфейс Vue, а не встраивать его в проект ASP.NET. это ответ, хотя.)

...