我正在構建我的第一個Angular.js應用程序，我正在使用Yeoman。使用grunt服務器，如何將所有請求重定向到根url？
Yeoman使用Grunt允許您使用命令「grunt server」運行node.js連接服務器。
我在html5模式下運行我的角度應用程序。根據角度文檔，這需要修改服務器以將所有請求重定向到應用程序的根目錄（index.html），因爲角度應用程序是單頁ajax應用程序。
「使用[HTML5]模式需要URL重寫服務器端的，基本上你不得不重寫所有的鏈接到應用程序的入口點（如index.html的）」
的問題，我試圖解決的問題詳見this問題。
如何修改我的grunt服務器以將所有頁面請求重定向到index.html頁面？
首先，使用您的命令行，使用gruntfile導航到您的目錄。
鍵入此的CLI：
npm install --save-dev connect-modrewrite
在你的呼嚕聲文件的頂部把這個：
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)
];
}
}
}
},
我爲此問題發送了一個拉取請求：https://github.com/yeoman/generator-angular/pull/132，但您需要手動應用它。
這仍然是這種情況？ – FutuToad
FYI約曼/咕嚕最近改變了默認模板新Gruntfiles。
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;
}
UPDATE：作爲咕嚕-的contrib-連接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;
}
}
}
}
});
}
Zuriel的回答非常好，但這應該是公認的答案。別忘了'npm install --save-dev connect-modrewrite' – Liam
爲了深入簡化@ 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/
這個選項也適用於我。 – brunodd
我嘗試了所有的這些，但沒有運氣。我正在編寫一個angular2應用程序，解決方案來自grunt-connect pushstate。 我所做的只是：
npm install grunt-connect-pushstate --save
，並在咕嚕文件：
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)
];
}
而這一切，像變魔術一樣。
上面有關拉請求的答案很好，但我喜歡@zuriel顯示瞭如何在這裏手工完成。 – splodingsocks
從這[問題]（http://stackoverflow.com/questions/25401114/livereload-html5-pushstate-with-angularjs-ui-router-and-yeoman）接受的答案爲我工作。 – AWolf
此答案不再有效 – frazras