编辑(21 年 3 月 23 日):使用 Universal 时需要注意的事项
您确实需要考虑专门为浏览器或服务器编写代码块。例如:
您可以使用外部 SAAS 解决方案(如 SharpSpring 或 Google Tag Manager)来帮助您的团队跟踪潜在客户并生成自动工作流。
其中一些服务要求您将对象写入窗口或文档对象。因为您的服务器没有运行 javascript,所以当在服务器上运行您的应用程序时,无法让这些对象表现得像本机那样。你将需要真正搞砸这些事情。
我发现一篇非常有用的文章是this demo of real app problems using Angular Universal。
您还需要动态地将导入的脚本添加到您的 index.html 标头中。我在几个不同的地方看到过同样的概念,但here 也是一个。可能有一个堆栈溢出答案具有相同的想法。
但是,在某些情况下,您将需要使用库或其他东西(如 Postscribe)将脚本动态添加到您的一个 html 模板文件中的单个组件。 Postscribe 通过允许我们在其中一个组件的表单前动态导入特定脚本,极大地帮助了我们。我强烈推荐使用 Postscribe。
因此,长话短说,您需要确保您正在导入脚本并将它们附加到您的 index.html 文件中仅当您的应用程序在浏览器中运行时。对所有外部 JS 文件以及您正在导入应用程序并直接使用的所有外部 JS 文件执行此检查。首先将 PLATFORM_ID 注入到您需要进行此签入的任何组件中,然后以这种方式使用它
这适用于各种事物,如动画(可能正在监听窗口滚动事件)等。
原帖如下:
@Cacoon 我希望这就是你所做的。
第一部分是 m98 在this Github issue 上的现有答案。为了清楚起见,只是在这里发布
- 构建您的应用程序:
npm run build:ssr
- 将 dist 移到您的服务器上
- 安装PM2
npm install pm2 -g
- 在您的服务器上,使用 PM2 运行服务器捆绑的应用程序
pm2 start dist/server.js
- 如果您使用的是 Nginx 或其他 Web 服务器,请确保将请求重定向到以 PM2 启动的应用正在侦听的端口。
更新(2020 年 2 月 7 日)
对于 Apache,请确保您的文档根目录被指定为您的 dist/browser 文件夹,例如
DocumentRoot "${SRVROOT}/htdocs/dist/browser"
<Directory "${SRVROOT}/htdocs/dist/browser">
然后在你的 httpd.conf 文件的底部试试这个:
<Location />
RewriteEngine On
# If an existing asset or directory is requested go to it as it is
RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -f [OR]
RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -d
RewriteRule ^ - [L]
RewriteRule ^ /index.html
</Location>
<VirtualHost *:80>
ServerName localhost
ServerAlias localhost
ProxyPreserveHost On
ProxyRequests Off
ProxyPass / http://localhost:4000/
ProxyPassReverse / http://localhost:4000/
</VirtualHost>
<VirtualHost *:443>
ServerName localhost
ServerAlias localhost
ProxyPreserveHost On
ProxyRequests Off
ProxyPass / https://localhost:4000/
ProxyPassReverse / https://localhost:4000/
</VirtualHost>
您必须在 httpd.conf 中设置虚拟主机,而不是在 .htaccess 文件中。您可以在 .htaccess 文件中将 Mod_rewrite 设置为与索引文件相同的级别,但不能在该级别设置虚拟主机。
另外,请确保启用代理模块,例如 httpd.conf 文件中的 mod_proxy_express
这是用于本地开发的。部署到产品时将 localhost 更改为您的域。