漂亮的nginx中的平均值应用程序的url

(*作为一些意见build议,我删除了index.ejs和使用index.html在这个答案 ,所以我调整了我的OP *)

我在Mac上用apache开发了一个可以通过https://localhost:3000/#/home请求的MEAN栈应用程序。 在使用nginx服务器进行生产时,可以通过https://www.myapp.io/#/home来请求应用程序。 片段标识符#在所有情况下都是需要的,因为angular ui-router

所以我想使没有# (例如, https://localhost:3000/home )漂亮的url工作。 我做了以下几件事:

1)添加$locationProvider.html5Mode(true); $locationProvider.hashPrefix('') $locationProvider.html5Mode(true); $locationProvider.hashPrefix('')app.config(['$stateProvider'...

2)在index.html添加<base href="/" />

因此, https://localhost:3000/#/home将自动更改为浏览器栏中的https://localhost:3000/home ,对于https://www.myapp.io/#/home

然而,在浏览器中直接inputhttps://localhost:3000/homehttps://www.myapp.io/home会产生一个错误(我不知道如何将之前的<h1><%= message %></h1><h2><%= error.status %></h2><pre><%= error.stack %></pre>error.ejserror.html ,所以我没有更多细节)。

所以现在,我们的目标是让https://localhost:3000/homehttps://www.myapp.io/home工作。

通过遵循这个线程 ,我添加了如下的app.js

 app.use('/js', express.static(__dirname + '/js')); app.use('/dist', express.static(__dirname + '/../dist')); app.use('/css', express.static(__dirname + '/css')); app.use('/partials', express.static(__dirname + '/partials')); app.all('/*', function(req, res, next) { res.sendFile('index.html', { root: __dirname }); }); 

apachemac ,这里是我的httpd-vhosts.conf ,重启apachehttps://localhost:3000/home仍然返回一个错误。

 <VirtualHost *:443> ServerName localhost DocumentRoot "/Users/SoftTimur" SSLEngine on SSLCipherSuite ALL:!ADH:!EXPORT56:RC4+RSA:+HIGH:+MEDIUM:+LOW:+SSLv2:+EXP:+eNULL SSLCertificateFile /etc/apache2/ssl/localhost.crt SSLCertificateKeyFile /etc/apache2/ssl/localhost.key <Directory "/Users/SoftTimur"> RewriteEngine on # Don't rewrite files or directories RewriteCond %{REQUEST_FILENAME} -f [OR] RewriteCond %{REQUEST_FILENAME} -d RewriteRule ^ - [L] # Rewrite everything else to index.html to allow html5 state links RewriteRule ^ index.html [L] Options Indexes FollowSymLinks AllowOverride All Order allow,deny Allow from all Require all granted </Directory> </VirtualHost> 

在生产中,这里是nginx服务器块。 重新启动nginx之后, https://www.myapp.io/home //www.myapp.io/home仍然返回一个错误。

 server { listen 443 ssl; server_name myapp.io www.myapp.io; ssl_certificate /etc/letsencrypt/live/myapp.io/fullchain.pem; ssl_certificate_key /etc/letsencrypt/live/myapp.io/privkey.pem; ssl_protocols TLSv1 TLSv1.1 TLSv1.2; ssl_prefer_server_ciphers on; ssl_dhparam /etc/ssl/certs/dhparam.pem; ssl_ciphers 'ECDHE-RSA-AES128-GCM-SHA256:ECDHE-ECDSA-AES128-GCM-SHA256:ECDHE-RSA-AES256-GCM-SHA384:EC$ ssl_session_timeout 1d; ssl_stapling on; ssl_stapling_verify on; add_header Strict-Transport-Security max-age=15768000; index index.html; root /opt/myapp location / { try_files $uri $uri/ /index.html; } location ~ /.well-known { allow all; } location / { proxy_set_header Host $host; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; proxy_set_header X-Forwarded-Proto $scheme; proxy_set_header Accept-Encoding ""; proxy_set_header Proxy ""; proxy_pass https://127.0.0.1:3000; # These three lines added as per https://github.com/socketio/socket.io/issues/1942 to remove sock$ proxy_http_version 1.1; proxy_set_header Upgrade $http_upgrade; proxy_set_header Connection "upgrade"; } } 

谁能帮忙?

我认为你应该问自己更好的问题是为什么你没有index.html? 也许我已经睡了太久,但是浏览器并不是真正能够在网页上自行执行JavaScript,没有HTML文档中的底层DOM。

一旦你明白了,你也可以用GitHub上的angular-ui的官方配置建议成功。

删除你添加的nginx配置。 这可以通过执行以下操作来实现:

有两件事情需要完成。

  1. 配置$ locationProvider

  2. 设置我们的基地相对链接

有关如何完成此操作的更详细说明,请参阅以下链接: AngularJS中的漂亮URL:删除#

对于Angular 1.6,您还需要更改hashPrefix:

 appmodulee.config(['$locationProvider', function($locationProvider) { $locationProvider.html5Mode(true); $locationProvider.hashPrefix(''); }]); 

我知道在你的问题你说,你已经完成了这两个步骤,但如果你完全按照这个教程,它将工作,因为我已经测试了我自己的Angular应用程序(这也通过nginx托管)。

要使用服务器配置路由,我建议遵循以下链接: AngularJS with Pretty URLs:删除Amazon S3中的#

此外, 这里是实际的服务器配置更改。

最后,我认为你对ejs的工作方式是错误的。 它需要HTML引导(毕竟,你必须有某种类型的index.html,像<script src="https://npmcdn.com/ejs/ejs.min.js"></script> ),或在服务器上处理(例如,用节点和/或朋友)。