我正在构建我的第一个Angular.js应用程序，并且正在使用Yeoman。
Yeoman 使用 Grunt 允许您使用命令“grunt server”运行 node.js 连接服务器。
我在 html5 模式下运行我的 Angular 应用程序。根据 Angular 文档，这需要修改服务器以将所有请求重定向到应用程序的根目录 (index.html)，因为 Angular 应用程序是单页 ajax 应用程序。
“使用 [html5] 模式需要在服务器端重写 URL，基本上你必须重写所有指向应用程序入口点的链接（例如 index.html）”
我试图解决的问题在这个问题中有详细说明。
如何修改我的 grunt 服务器以将所有页面请求重定向到 index.html 页面？
首先，使用您的命令行，使用您的 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 最近更改了新 Gruntfiles 的默认模板。
复制默认的中间件逻辑对我有用：
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;
}
}
}
}
});
}
我针对这个问题发送了一个拉取请求：https ://github.com/yeoman/generator-angular/pull/132 ，但您需要手动应用它。
为了深入简化@Zuriel 的答案，这是我发现可以代表我工作的内容。
npm install connect-modrewrite --savevar 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)
];
}
这一切都像魔术一样起作用。