Vue.js 使用ASP.net Core 2.0应用程序在IIS上托管时发生VueJs Url重写错误
我正在Asp.net Core 2.0应用程序的Vue.js 使用ASP.net Core 2.0应用程序在IIS上托管时发生VueJs Url重写错误,vue.js,url-rewriting,asp.net-core-2.0,iis-8,Vue.js,Url Rewriting,Asp.net Core 2.0,Iis 8,我正在Asp.net Core 2.0应用程序的WWWROOT文件夹中托管vuejsapp 当我尝试使用url运行应用程序时: 或者,当在浏览器上点击时,应用程序应该重定向到../index,但什么也没有发生。在浏览器控制台上,它们的错误始终为“低于”错误 manifest.c93377026a31fd19d204.js:1未捕获的语法错误:意外标记< vendor.ce0b0308730c78917196.js:1未捕获的语法错误:意外标记< app.09cbf8437d50e73c0697.
WWWROOT
文件夹中托管vuejs
app
当我尝试使用url运行应用程序时:
或者,当在浏览器上点击时,应用程序应该重定向到../index,但什么也没有发生。在浏览器控制台上,它们的错误始终为“低于”错误
manifest.c93377026a31fd19d204.js:1未捕获的语法错误:意外标记<
vendor.ce0b0308730c78917196.js:1未捕获的语法错误:意外标记<
app.09cbf8437d50e73c0697.js:1未捕获的语法错误:意外标记<
我正在应用程序的web配置文件中重写URL,如下所示
Web配置
在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>
在VueJs中,我使用的是历史记录
模式
这是我在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配置中的值更改为“/wwwroot/”
(注意:我正在使用的应用程序实际上有一个单独的API项目/站点,因此我的解决方案是直接托管Vue前端,而不是将其嵌入ASP.NET项目中。不过,我很确定这就是答案。)我在web配置中使用了下面的代码,解决了上面的问题。我把所有的标签都贴在这里作为答案。希望这将帮助有类似问题的人
<?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>
.你用这个aakash有什么收获吗?我也有同样的问题。
<?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>