我使用 AngularJS 和 GAE（Google App Engine – Java）创建了一个应用程序。
我想将其转换为与 SEO 兼容。
<meta name="fragment" content="!" /><base href="/">并且身体是通过动态加载的<div ui-view></div>。
$locationProvider.html5Mode(true);
该网址工作正常，但是当我刷新页面时出现 404 错误。
你有什么想法，这是什么原因？
我确定您已经解决了这个问题，但是对于遇到此问题的其他人：
基本上，AngularJS$locationProvider.html5mode(true)使用了 HTML5 history.pushState()，它人为地更改了用户的历史记录和地址栏 URL，而无需重新加载页面。如果你创建一个路由（在 Angular 中）/about，但在服务器上没有任何匹配的路由，你将遇到重新加载页面会显示它在服务器上不存在的事实的问题。最简单的解决方案是为您的应用程序可访问的所有路由镜像您的应用程序入口点 ( /index.html?)。
它应该是有帮助的，官方的角度文档； https://github.com/angular-ui/ui-router/wiki/Frequently-Asked-Questions#how-to-configure-your-server-to-work-with-html5mode
我仍然会在此处粘贴相关部分，但我建议您查看文档。
Apache Rewrites
服务器名称 my-app
DocumentRoot /path/to/app
<Directory /path/to/app>
RewriteEngine on
# Don't rewrite files or directories
RewriteCond %{REQUEST_FILENAME} -f [OR]
RewriteCond %{REQUEST_FILENAME} -d
RewriteRule ^ - [L]
# Rewrite everything else to index.html to allow html5 state links
RewriteRule ^ index.html [L]
</Directory>
Nginx 重写
server {
server_name my-app;
index index.html;
root /path/to/app;
location / {
try_files $uri $uri/ /index.html;
}
}
Azure IIS 重写
<system.webServer>
<rewrite>
<rules>
<rule name="Main Rule" 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>
尝试在您的 grunt 文件肝脏加载中间件部分添加以下部分。
livereload: {
options: {
open: true,
middleware: function (connect) {
return [
connect.static('.tmp'),
connect().use(
'/bower_components',
connect.static('./bower_components')
),
connect().use(
'/app/styles',
connect.static('./app/styles')
),
connect().use(
'/apply',
connect.static('./app/index.html')
),
connect.static(appConfig.app)
];
}
}
}
}
对我来说，修复以下行作为索引（主）页面标签内的第一行：
<base href="/">
另外，您需要配置 IIS 重写规则如下：（确保先安装 iis 重写扩展）
<system.webServer>
<rewrite>
<rules>
<rule name="AngularJS 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="^/(api)" negate="true" />
</conditions>
<action type="Rewrite" url="/" />
</rule>
</rules>
</rewrite>
<caching enabled="false" enableKernelCache="false" />
对于在 GAE 上运行的 Java 应用程序，您可以使用
您将找到名为 urlrewrite.xml 的 XML 文件。将所有路由放入此 xml，并以某种方式对其进行配置，以便在收到如下请求时：
它将被重定向到
并且您的应用程序将有时间引导并触发路由
人们已经有一段时间没有寻找这个答案了，但我今天需要它。我用 GAE、angularJS 和 ng-Route 制作了一个工作示例，这些示例具有漂亮的格式化链接。