带有 MAMP 的 html5 推送状态

Question

我正在本地开发一个 Angular 网站（使用虚拟主机和 xip.io 服务器别名），并使用 pushstate 来美化那些乱七八糟的网址。在远程服务器上，我可以使用 .htaccess 和索引上的基本 href 来实现这一点，但是在本地工作，我无法让它完全工作。

我可以浏览网站并且网址会相应更改，但如果我刷新页面，我的 .js 依赖项会变为 404，并且页面只会加载一半。

这是我尝试过的htaccess：

# html5 pushstate (history) support: <ifModule mod_rewrite.c> RewriteEngine On RewriteCond %{REQUEST_FILENAME} !-f RewriteCond %{REQUEST_FILENAME} !-d RewriteCond %{REQUEST_URI} !index RewriteRule (.*) /index.html [L] </ifModule>

这是我用于根级 htaccess 的，没有效果。但是，在服务器上，需要将 htaccess 文件放在根目录的上一级，所以我在本地设置中做了类似的操作：

# html5 pushstate (history) support: <ifModule mod_rewrite.c> RewriteEngine On RewriteCond %{REQUEST_FILENAME} !-f RewriteCond %{REQUEST_FILENAME} !-d RewriteCond %{REQUEST_URI} !index RewriteRule (.*) dist/index.html [L] </ifModule>

还是没有效果。

在谷歌搜索中，我发现这可以通过 vhosts 文件添加，所以我试了一下，将这些规则添加到 <Directory> 标签中，如下所示：

<VirtualHost *:80>
ServerName localmk.ilium1.com
ServerAlias client.*.xip.io
DocumentRoot /Users/mattk/Documents/ilium/web2014/BootstrapRepository/ilium-website-bootstrap/bootstrap/dist
<Directory /Users/mattk/Documents/ilium/web2014/BootstrapRepository/ilium-website-bootstrap/bootstrap/dist>

DirectoryIndex index.html

# html5 pushstate (history) support
<IfModule mod_rewrite.c>
    RewriteEngine On
    RewriteBase /
    RewriteRule ^index\.html$ - [L]
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteRule . /index.html [L]
</IfModule>
</Directory>
</VirtualHost>

我只是跳入这些东西，因此我很无知（以防这里没有显示）。我可能会或可能不会问正确的问题。非常感谢任何指导。

编辑：重新启动 Apache 后，我之前尝试刷新失败的页面开始这样做。我很兴奋，用“重新启动服务器”回答了我自己的问题，然后高兴地回去工作……直到我发现其他视图仍然不能正常刷新。这些视图模板和 URL 离目录结构的顶部更近一层，例如，/work/ 处的视图不会正确/完全刷新，但/work/somethingelse 处的视图会正常刷新。控制台告诉我 Resource interpreted as Script but transferred with MIME type text/html 用于我的每个 .js 文件（最终通过 Grunt 连接成一个），以及每个 Uncaught SyntaxError: Unexpected token <。以前这些只会导致 404。不知道发生了什么。

Answer 1

嗯，这很清楚地说明了我的笨拙。答案很简单。

我在编辑 vhosts 文件后忽略了重新启动 Apache。

重新启动服务器就像一个魅力。进入下一个尴尬...