AngularJS html5Mode za pomocą Grunt connect. grunt 0.4.5
Niedawno przełączyłem się na grunt 0.4.5 i zmieniło się jak działa connect.
Wcześniej używałem connect-modrewrite i działało całkiem dobrze(miałem pewne problemy z adresami URL generowanymi przez parametr/:).
Oto stara wersja, która działała z grunt 0.4.1 z generatora-angular 0.8.0 z częścią middleware modded przeze mnie do korzystania z html5mode.
connect: {
options: {
port: 9000,
hostname: '*IP HERE*',
livereload: 35729,
middleware: function (connect, options) {
var optBase = (typeof options.base === 'string') ? [options.base] : options.base;
return [require('connect-modrewrite')(['!(\\..+)$ / [L]'])].concat(
optBase.map(function(path){ return connect.static(path); })
);
}
},
livereload: {
options: {
open: true,
base: [
'.tmp',
'<%= yeoman.app %>'
]
}
},
Oto nowa wersja generatora-angular 0.9.0-1
connect: {
options: {
port: 9000,
hostname: '*IP HERE*',
livereload: 35729
},
livereload: {
options: {
open: true,
middleware: function (connect) {
return [
connect.static('.tmp'),
connect().use(
'/bower_components',
connect.static('./bower_components')
),
connect.static(appConfig.app)
];
}
}
},
Jak mogę to zmienić, aby użyć mod-rewrite lub dowolnego inna metoda osiągnięcia html5mode?
Próbowałem użyć metody podanej tutaj: https://gist.github.com/nnarhinen/7719157 Połączyłem go, aby utworzyć następujące:
middleware: function (connect) {
return [
connect.static(modRewrite(['^[^\\.]*$ /index.html [L]'])),
connect.static('.tmp'),
connect().use(
'/bower_components',
connect.static('./bower_components')
),
connect.static(appConfig.app)
];
}
To pozwala mi zobaczyć normalny widok, ale część modRewrite nie wydaje się robić tego, co musi, aby dostać się do innego widoku przez url.
4 answers
Jeśli ktoś jeszcze potknie się przez to tutaj jest poprawka:
(jedyną dodaną linią była linia modRewrite)
livereload: {
options: {
open: true,
middleware: function (connect) {
return [
modRewrite(['^[^\\.]*$ /index.html [L]']),
connect.static('.tmp'),
connect().use(
'/bower_components',
connect.static('./bower_components')
),
connect.static(appConfig.app)
];
}
}
},
Upewnij się, że masz zadeklarowane na górze pliku grunt:
var modRewrite = require('connect-modrewrite');
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-06-24 10:29:29
Biorąc pod uwagę, że inne odpowiedzi są dość gadatliwe i nie zachowują domyślnego grunt-contrib-connect
middlewares, wymyśliłem rozwiązanie, które wykorzystuje dedykowane oprogramowanie middleware– connect-history-api-fallback
:
npm install connect-history-api-fallback --save-dev
var history = require('connect-history-api-fallback')
//...
connect: {
options: {
middleware: function(connect, options, middleware) {
middleware.unshift(history())
return middleware
},
//...
},
//...
}
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-06-22 08:42:39
Choć powyższa odpowiedź jest poprawna. Im dodając config, którego używam, działa idealnie na CentOs.
Poniżej 1 do 3 kroków należy wykonać, aby Angularjs clean URL działał w Twojej lokalnej maszynie za pomocą $ grunt serve
Ale jeśli chcesz, aby działały dobrze na serwerze, specjalnie nginx będziesz również musiał zaktualizować konfigurację nginx. (Krok 4)
$ npm install connect-modrewrite --save
-
Edytuj swój gruntfile.js. Dodaj na górze plik
var modRewrite = require('connect-modrewrite');
Potem w Twoim middleware
:
middleware: function (connect) {
return [
modRewrite(['^[^\\.]*$ /index.html [L]']),
connect.static('.tmp'),
connect().use('/bower_components',
connect.static('./bower_components')),
connect.static(config.app)
];
}
Dla np.
// Generated on 2015-11-09 using generator-angular 0.14.0
'use strict';
// # Globbing
// for performance reasons we're only matching one level down:
// 'test/spec/{,*/}*.js'
// use this if you want to recursively match all subfolders:
// 'test/spec/**/*.js'
var modRewrite = require('connect-modrewrite');
module.exports = function (grunt) {
// Time how long tasks take. Can help when optimizing build times
require('time-grunt')(grunt);
3.Następnie przejdź do Livereload middleware, dodaj modRewrite
livereload: {
options: {
middleware: function (connect) {
return [
modRewrite([
'^[^\\.]*$ /index.html [L]'
]),
connect.static('.tmp'),
connect().use('/bower_components', connect.static('./bower_components')),
connect.static(config.app)
];
}
}
},
4.Edit nginx config:
server {
server_name yoursite.com;
root /usr/share/html;
index index.html;
location / {
try_files $uri $uri/ /index.html;
}
}
Mam nadzieję, że pomoże:)
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-02-08 20:08:44
Oto moje rozwiązanie, dostosowane do konfiguracji generator-angular
, ale może być używane wszędzie. Pozwala na przepisywanie składni (ciekawą częścią jest przykładowy configuarion).
connect: {
options: {
port: 9000,
// Change this to '0.0.0.0' to access the server from outside.
hostname: 'localhost',
livereload: 35729,
// Modrewrite rule, connect.static(path) for each path in target's base
middleware: function (connect, options) {
var optBase = (typeof options.base === 'string') ? [options.base] : options.base,
middleware = [require('connect-modrewrite')(['!(\\..+)$ / [L]'])]
.concat(optBase.map(function (path) {
if (path.indexOf('rewrite|') === -1) {
return connect.static(path);
} else {
path = path.replace(/\\/g, '/').split('|');
return connect().use(path[1], connect.static(path[2]))
}
}));
return middleware;
}
},
livereload: {
options: {
open: true,
base: [
'.tmp',
'rewrite|/bower_components|./bower_components',
'rewrite|/app/styles|./app/styles', // for sourcemaps
'<%= yeoman.app %>'
]
}
}
}
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-11-19 21:09:12