使用 ASP.net Core 2.0 应用程序在 IIS 上托管时 VueJs Url 重写错误
VueJs Url Rewrite Error when hosting on IIS with ASP.net Core 2.0 application
我在 Asp.net Core 2.0 应用程序的 WWWROOT 文件夹中托管 vuejs 应用程序。
当我尝试 运行 使用 url 的应用程序时：
https://admin.myapp.com or https://admin.myapp.com/index, when 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 配置文件中，如下所示。
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>
我的创业公司class：
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
数据填充正确。
如有任何建议或帮助，我们将不胜感激。
我认为这里的问题是，默认情况下，Vue 假设您的应用程序托管在您域的基础上 (https://admin.myapp.com)。但是当您将它部署为 ASP.NET 项目的一部分时，它最终位于一个文件夹中 (https://admin.myapp.com/wwwroot)。当请求应用程序文件时，IIS Rewrite 不会将它们检测为现有文件（因为它们不是 - 相对于基础文件）并且正在被重写为 index.html.
尝试将 Vue 配置中的 baseUrl 值更改为“/wwwroot/”。
（注意：我正在处理的应用程序实际上有一个单独的 API project/site，所以我的解决方案是直接托管 Vue 前端而不是嵌入它在一个 ASP.NET 项目中。但很确定这就是答案。）
我在网络配置中使用了下面的代码解决了我上面的问题。我已将所有标签张贴在这里作为答案。希望这对遇到类似问题的人有所帮助。
<?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>
您可以在 blog 上阅读更多内容。
我在 Asp.net Core 2.0 应用程序的 WWWROOT 文件夹中托管 vuejs 应用程序。
当我尝试 运行 使用 url 的应用程序时：
https://admin.myapp.com or https://admin.myapp.com/index, when 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 配置文件中，如下所示。
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>
我的创业公司class：
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
数据填充正确。
如有任何建议或帮助，我们将不胜感激。
我认为这里的问题是，默认情况下，Vue 假设您的应用程序托管在您域的基础上 (https://admin.myapp.com)。但是当您将它部署为 ASP.NET 项目的一部分时，它最终位于一个文件夹中 (https://admin.myapp.com/wwwroot)。当请求应用程序文件时，IIS Rewrite 不会将它们检测为现有文件（因为它们不是 - 相对于基础文件）并且正在被重写为 index.html.
尝试将 Vue 配置中的 baseUrl 值更改为“/wwwroot/”。
（注意：我正在处理的应用程序实际上有一个单独的 API project/site，所以我的解决方案是直接托管 Vue 前端而不是嵌入它在一个 ASP.NET 项目中。但很确定这就是答案。）
我在网络配置中使用了下面的代码解决了我上面的问题。我已将所有标签张贴在这里作为答案。希望这对遇到类似问题的人有所帮助。
<?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>
您可以在 blog 上阅读更多内容。