我正在构建我的第一个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
在您的咕unt声文件的顶部放这个:
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) ]; } } } },