使用咕噜服务器,我该怎么重定向到根URL的请求?
我建设我的第一个 Angular.js 的应用程序,我使用的约曼。
I am building my first Angular.js application and I'm using Yeoman.
约曼使用咕噜声,让你运行一个node.js的命令'咕噜服务器的连接服务器。
Yeoman uses Grunt to allow you to run a node.js connect server with the command 'grunt server'.
我跑我的HTML5模式的角度应用。据角文档,这需要在服务器进行修改,以所有请求重定向到应用程序(的index.html)的根,因为角度的应用程序都是单页面Ajax应用程序。
I'm running my angular application in html5 mode. According to the angular docs, this requires a modification of the server to redirect all requests to the root of the application (index.html), since angular apps are single page ajax applications.
使用[HTML5]模式需要URL重写服务器端的,基本上你不得不重写所有的链接到应用程序的入口点(例如,index.html)
"Using [html5] mode requires URL rewriting on server side, basically you have to rewrite all your links to entry point of your application (e.g. index.html)"
这是我试图解决的问题是在this问题。
The problem that I'm trying to solve is detailed in this question.
如何修改我的咕噜服务器重定向页面的所有请求index.html页面?
How can I modify my grunt server to redirect all page requests to the index.html page?
首先,使用命令行,导航到您的gruntfile目录。
First, using your command line, navigate to your directory with your gruntfile.
在CLI中键入此:
npm install --save-dev connect-modrewrite
在你的呼噜声文件把这个顶部:
At the top of your grunt file put this:
var modRewrite = require('connect-modrewrite');
现在的下一个部分,你只需要添加 modRewrite 到您的连接:
Now the next part, you only want to add modRewrite into your connect:
modRewrite(['!\\.html|\\.js|\\.svg|\\.css|\\.png$ /index.html [L]']),
下面是什么我的连接看起来像我的Gruntfile.js里面的例子。您不必担心我lrSnippet和我ssIncludes。你所需要的最主要的是刚刚获得在modRewrite。
Here is a example of what my "connect" looks like inside my Gruntfile.js. You don't need to worry about my lrSnippet and my ssIncludes. The main thing you need is to just get the modRewrite in.
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)
];
}
}
}
},