关于 Angular 应用部署时的 base-href 参数

举报
Jerry Wang 发表于 2023/04/07 18:42:36 2023/04/07
【摘要】 import { existsSync } from 'fs'; server.get(['/shop/*','/shop'], (req, res) => {res.render(indexHtml, {req,providers: [{ provide: APP_BASE_HREF, useValue: req.baseUrl }],});}); server.set('views', ...
import { existsSync } from 'fs';
 
server.get(['/shop/*','/shop'], (req, res) => {
res.render(indexHtml, {
req,
providers: [{ provide: APP_BASE_HREF, useValue: req.baseUrl }],
});
});
 
server.set('views', distFolder + '/shop );
const fs = require("fs");
fs.copyFileSync('dist/spartacusstore/browser/index.html', 'dist/spartacusstore/browser/shop/index.html');

这段代码是在使用 Node.js 进行 Angular 应用的服务器端渲染(Server-side rendering,简称 SSR)时,针对特定路由路径进行了一些额外的处理。

  • 代码中使用 Node.js 内置模块 fs 中的 existsSync 方法,判断 indexHtml 文件是否存在。如果文件不存在,则应该返回 404 错误页面。

  • 代码中的 server.get 方法监听了 /shop/* 和 /shop 两个路由路径,并在请求这两个路径时渲染应用的主模板 indexHtml。在渲染模板时,通过 providers 属性将 APP_BASE_HREF 的值设置为当前请求的路径 req.baseUrl,这样 Angular 应用就能够正确地根据请求路径进行路由匹配了。

  • 代码中的 server.set 方法设置了应用程序的视图文件夹,即告诉服务器应该从哪里加载视图文件。在这个例子中,视图文件夹的路径是 distFolder + ‘/shop’,也就是应用程序的构建输出目录 dist 下的 shop 文件夹。

  • 代码中使用了 Node.js 内置模块 fs 中的 copyFileSync 方法,将 Angular 应用的构建输出目录 dist/spartacusstore/browser 下的 index.html 文件复制到视图文件夹 dist/spartacusstore/browser/shop 下,以便在渲染 /shop 和 /shop/* 路由路径时使用。

·ng build --base-href /shop/· 是一个 Angular CLI 的命令,用于构建 Angular 应用程序,并设置应用程序的基本 URL。

具体来说,–base-href 参数用于指定应用程序在 Web 服务器上的基本 URL,也就是说,应用程序将被部署在 http://server.com/shop/ 这个 URL 下。这个参数的值应该是以斜杠开头和结尾的相对路径,例如 /shop/。

当应用程序加载各种资源文件时,都会以这个基本 URL 作为前缀来加载资源。例如,如果应用程序中有一个 favicon.ico 的图标文件,那么浏览器会请求 http://server.com/shop/favicon.ico 来获取这个文件。

通过指定基本 URL,可以让应用程序在部署时更加灵活。例如,可以将应用程序部署在不同的子目录下,或者在同一个 Web 服务器上部署多个应用程序而不会发生冲突。

【版权声明】本文为华为云社区用户原创内容,转载时必须标注文章的来源(华为云社区)、文章链接、文章作者等基本信息, 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。