我正在构建我的第一个Angular.js 应用程序，我正在使用Yeoman。
Yeoman 使用 Grunt 允许您使用命令“grunt server”运行 node.js 连接服务器。
我在 html5 模式下运行我的 Angular 应用程序。根据 Angular 文档，这需要修改服务器以将所有请求重定向到应用程序的根目录 (index.html)，因为 Angular 应用程序是单页 ajax 应用程序。
“使用 [html5] 模式需要在服务器端重写 URL，基本上你必须重写所有指向应用程序入口点的链接（例如 index.html）”
this 问题中详细说明了我要解决的问题。
如何修改我的 grunt 服务器以将所有页面请求重定向到 index.html 页面？
【问题讨论】：
标签： node.js angularjs gruntjs yeoman angularjs-routing
首先，使用您的命令行，使用您的 gruntfile 导航到您的目录。
在 CLI 中键入：
npm install --save-dev connect-modrewrite
在你的 grunt 文件的顶部放这个：
var modRewrite = require('connect-modrewrite');
现在下一部分，您只想将modRewrite 添加到您的连接中：
modRewrite(['!\\.html|\\.js|\\.svg|\\.css|\\.png$ /index.html [L]']),
这是我的“连接”在我的 Gruntfile.js 中的样子的示例。您无需担心我的 lrSnippet 和我的 ssIncludes。你需要做的主要事情就是把 modRewrite 放进去。
connect: {
options: {
port: 9000,
// Change this to '0.0.0.0' to access the server from outside.
hostname: '0.0.0.0',
},
livereload: {
options: {
middleware: function (connect) {
return [
modRewrite(['!\\.html|\\.js|\\.svg|\\.css|\\.png$ /index.html [L]']),
lrSnippet,
ssInclude(yeomanConfig.app),
mountFolder(connect, '.tmp'),
mountFolder(connect, yeomanConfig.app)
];
}
}
},
test: {
options: {
middleware: function (connect) {
return [
mountFolder(connect, '.tmp'),
mountFolder(connect, 'test')
];
}
}
},
dist: {
options: {
middleware: function (connect) {
return [
mountFolder(connect, yeomanConfig.dist)
];
}
}
}
},
【讨论】：
仅供参考，Yeoman/Grunt 最近更改了新 Gruntfile 的默认模板。
Copying the default middlewares logic 为我工作：
middleware: function (connect, options) {
var middlewares = [];
var directory = options.directory || options.base[options.base.length - 1];
// enable Angular's HTML5 mode
middlewares.push(modRewrite(['!\\.html|\\.js|\\.svg|\\.css|\\.png$ /index.html [L]']));
if (!Array.isArray(options.base)) {
options.base = [options.base];
}
options.base.forEach(function(base) {
// Serve static files.
middlewares.push(connect.static(base));
});
// Make directory browse-able.
middlewares.push(connect.directory(directory));
return middlewares;
}
更新：从 grunt-contrib-connect 0.9.0 开始，将中间件注入连接服务器要容易得多：
module.exports = function (grunt) {
// Load grunt tasks automatically
require('load-grunt-tasks')(grunt);
grunt.initConfig({
// The actual grunt server settings
connect: {
livereload: {
options: {
/* Support `$locationProvider.html5Mode(true);`
* Requires grunt 0.9.0 or higher
* Otherwise you will see this error:
* Running "connect:livereload" (connect) task
* Warning: Cannot call method 'push' of undefined Use --force to continue.
*/
middleware: function(connect, options, middlewares) {
var modRewrite = require('connect-modrewrite');
// enable Angular's HTML5 mode
middlewares.unshift(modRewrite(['!\\.html|\\.js|\\.svg|\\.css|\\.png$ /index.html [L]']));
return middlewares;
}
}
}
}
});
}
【讨论】：
npm install --save-dev connect-modrewrite
我为此问题发送了一个拉取请求：https://github.com/yeoman/generator-angular/pull/132，但您需要手动应用它。
【讨论】：
为了深入简化@Zuriel 的回答，以下是我发现的代表我的工作。
npm install connect-modrewrite --save
var rewrite = require( "connect-modrewrite" );
修改连接选项以使用重写：
connect: {
options: {
middleware: function ( connect, options, middlewares ) {
var rules = [
"!\\.html|\\.js|\\.css|\\.svg|\\.jp(e?)g|\\.png|\\.gif$ /index.html"
];
middlewares.unshift( rewrite( rules ) );
return middlewares;
}
},
server: {
options: {
port: 9000,
base: "path/to/base"
}
}
}
尽可能简化这一点。因为您可以访问 connect 提供的中间件，所以很容易将重写设置为第一优先级响应。我知道这个问题被问到已经有一段时间了，但这是谷歌搜索该问题的最佳结果之一。
想法来自源代码：https://github.com/gruntjs/grunt-contrib-connect/blob/master/Gruntfile.js#L126-L139
规则字符串来自：http://danburzo.ro/grunt/chapters/server/
【讨论】：
我尝试了所有这些，但没有运气。我正在编写一个 angular2 应用程序，解决方案来自 grunt-connect pushstate。 我所做的只是：
npm install grunt-connect-pushstate --save
在 grunt 文件中：
var pushState = require('grunt-connect-pushstate/lib/utils').pushState;
middleware: function (connect, options) {
return [
// Rewrite requests to root so they may be handled by router
pushState(),
// Serve static files
connect.static(options.base)
];
}
这一切都像魔术一样。
【讨论】：