首先,我尝试了很多不同的解决方案来解决这个问题,但没有一个对我有用。请参阅下面的链接。
问题:
目前我无法将 html5mode
与 ui-router 一起使用,因为它出现 Not Found
错误。它加载页面的唯一时间是第一次加载。每次刷新或尝试访问特定URL
时,都会出现此错误:
The requested URL /Welcome was not found on this server.
我的代码
目前我正在使用 AngularJS 1.5.0
和 ui-router 0.2.15
。 注意:我使用的是一个空白应用程序,在 apache 服务器中只有 2 个主状态和 1 个主状态以及一个子状态。
html:
<head>
<meta charset="UTF-8" />
<base href="/"></base>
</head>
.config:
$locationProvider.html5Mode(true);
服务器重写:
<ifModule mod_rewrite.c>
RewriteEngine on
# Don't rewrite files or directories
RewriteCond %{REQUEST_FILENAME} -f [OR]
RewriteCond %{REQUEST_FILENAME} -d
RewriteRule ^ - [L]
RewriteRule ^ index.html [L]
</ifModule>
我尝试过的
我查找了很多主题/问题试图解决这个问题。他们都指出了 3 种可能的解决方案:
- 使用
base
标签; - 在服务器端重写条件;
- 没有使用
base
标签(很难找到,但有一些);
我按照这些链接(以及更多链接)尝试了所有这些:
- Page reload fails when using Angular Ui Router with Html5 mode enabled
- $location / switching between html5 and hashbang mode / link rewriting
- https://github.com/angular-ui/ui-router/wiki/Frequently-Asked-Questions#how-to-configure-your-server-to-work-with-html5mode
- https://github.com/angular-ui/ui-router/wiki/Frequently-Asked-Questions#issue-my-assets-and-templates-are-not-loading
还有其他链接..但它们都不起作用,总是相同的结果。当我收到不同的错误时,就是这个:
Internal Server Error The server encountered an internal error or misconfiguration and was unable to complete your request.
Please contact the server administrator at admin@localhost to inform them of the time this error occurred, and the actions you performed just before this error.
More information about this error may be available in the server error log.
当我尝试使用这样的重写规则时:
<Directory />
RewriteEngine on
RewriteCond %{REQUEST_FILENAME} -f [OR]
RewriteCond %{REQUEST_FILENAME} -d
RewriteRule ^ - [L]
RewriteRule ^ index.html [L]
</Directory>
编辑:
经过一些评论后,我设法让它工作,但仅限于主状态。当我处于子(嵌套)状态并尝试刷新页面时,我收到此错误:
Uncaught SyntaxError: Unexpected token <
Uncaught ReferenceError: angular is not defined
Resource interpreted as Stylesheet but transferred with MIME type text/html:
我的状态示例:
.state('contact', {
parent:'app',
url:'/Contact',
views: {
'app': {
templateUrl: 'app/contact.html',
}
}
})
.state('service', {
parent:'app',
abstract: true,
url:'/Service',
views: {
'app': {
templateUrl: 'app/service.html',
}
}
})
.state('service-teste', {
parent:'service',
url:'/Test',
views: {
'service': {
templateUrl: 'app/service_test.html',
}
}
})
当我处于 service-test
状态并刷新页面时,出现错误。
最佳答案
我解决这个问题的方法是更改 .htaccess
文件和 index.html
上的一些设置,但更改一些路径。
.htaccess
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteRule ^index.html$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.html [L]
</IfModule>
Note that the mod_rewrite had to be enabled on my apache server. By default it was disabled.
index.html
我必须更改 css 文件的路径并在开头添加 /
。像这样:
<link rel="stylesheet" type="text/css" href="/dist/css/main.min.css">
我照常保留其他配置。
$locationProvider.html5Mode(true); //In the router config file
<base href="/"> //On the index.html just before closing the head tag
关于AngularJS ui-router html5mode 无法重新加载,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35019805/