angular 部署的项目自定义访问路径，不使用root根目录的配置

最新推荐文章于 2025-11-11 13:33:16 发布
原创 最新推荐文章于 2025-11-11 13:33:16 发布 · 5.5k 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#angular #base #basePath

本文详细介绍如何正确配置前端项目中的静态资源路径，确保html文件能正确引用assets目录下的资源，包括图片等。通过修改index.html中的base标签、karma.conf.js中的basePath属性，以及发布时的目录设置，实现资源的正确加载。

配置方法如下（以项目名称为admin为例）：

需要注意的地方，html中引用的静态文件要从assets开始写，不可以使用相对路径，例如:

<img src="../images/bg.png"/> 不可以，会出现路径引用错误，找不到此图片文件；

<img src="assets/images/bg.png"/> 是可以的，正常显示。

1、修改index.html文件中的base为<base href="/admin/">

2、修改配置文件karma.conf.js，中的basePath:'admin'

3、编译发布将编译后的文件放在tomcat/root/admin/目录下面即可。

4、效果如下：

Angular Web App部署Linux Nginx Https
FlyWine的博客
04-13 1838
Angular Web App部署Linux Nginx Https 提示：这篇文章是基于内网的 互联网就开始将 WEB 服务从 HTTP 迁移到 HTTPS，而现在为了更快的推进 HTTPS 的普及，Chrome 将从 2018 年 7 月起标记所有的 HTTP 网站为不安全链接。 HTTPS 会逐渐成为 WEB 服务的标配，最最重要的是，它能给用户带来更安全、更好隐私保护的网络体...
04.【个人网站】如何使用Vercel部署网站
编译的阿喵
09-04 2263
Vercel 是一个前端开发平台，专注于提供简单、快速的部署和管理静态网站和前端框架应用（例如 Next.js）的服务。它通过无缝的持续集成和交付（CI/CD）流程，使开发者可以轻松地将代码从本地推送到生产环境。Vercel 是一个功能强大且易于使用的前端开发平台，特别适合需要频繁部署和更新的前端项目。通过其强大的自动化部署和全球 CDN 加速，开发者可以专注于编写代码，而无需担心部署和性能优化问题。
在 angular6 中自定义 webpack 配置
weixin_44510284的博客
06-28 1352
在 angular6 中自定义 webpack 配置 我们已经使用 angular6 开发了一套后台管理系统，且体量日益增大，为了优化打包速度，想从 webpack 着手。 但是Angular Cli 6 禁用了webpack的自定义配置，官方似乎并未提供自定义配置webpack的方法；在此之前，可以使用ng eject把默认的webpack提取到代码中，进行自定义，但是 angular6 不支持了，只能使用 第三方库来实现。 1. 探索阶段–成功在 angular6 中使用 自定义 webpack 配置
Angular打包文件目录及访问地址
Spenan
12-07 1706
方法一、改变文件目录 不改变访问地址： ng build --prod --base-href /web 说明：web为你在运行环境环境（如：tomcat）中的文件夹名称即可 方法二、改变访问地址录同时改变文件目录 1、修改index.html文件中的base <base href="/web/"> 2、修改配置文件karma.conf.js，中的basePath bas...
angular--图片路径
weixin_42429288的1博客
07-19 5251
确保你的angular.json中静态资源路径的设置如下 然后在组件中，我的项目结构如下，图片都在assets文件夹中 使用图片 html <header> <p>漫威角色</p> <!-- 静态--> <img src="assets/kp1.jpg" /> <!-- 动态 --> ...
将Angular应用部署到nginx子目录
robinz1001的博客
11-29 1882
将Angular应用部署到nginx子目录 1. 调整Angular的base目录 在执行 ng build 命令以后，生成的index.html文件的 head 标签中有一个 base 标签。 如果要将angular部署到非根目录，这里需要放入目录名。比如需要部署到 /review 路径下，可按以下代码： <!doctype html> <html lang="en"> ...
angular 图片路径 静态资源加载 问题
热门推荐
Nfboys的博客
05-30 1万+
今天因为这个问题头疼了整整一天。不得不说angular还有很大的优化空间。 一般打包发布项目，只需要运行命令 ng build --prod --output-path docs --base-href 然后把docs目录下的内容复制到服务器下即可。 还可以发布到Git Pages，是github提供的页面服务，相当于呈现repository里的页面。这也是angular官方推荐的两种...
22、探索 Angular ASP.NET Core 项目模板
最新发布
rust6ferris的博客
11-11 10
本文详细介绍了如何使用 Visual Studio 中的 ASP.NET Core 与 Angular 项目模板创建和升级 Angular 应用程序。内容涵盖技术要求、项目结构、Angular 架构核心概念（如组件、模块、服务、指令、管道和数据绑定），以及配置文件解析、构建与发布流程。同时，文章还讲解了单元测试与端到端测试的实现方式，并提供了创建和测试流程图，帮助开发者全面掌握基于 Angular 和 ASP.NET Core 的全栈开发基础。
前后端分离项目部署指南：Nginx与Tomcat配置详解
然而，在某些部署场景下，为了简化访问路径或避免因版本变更导致配置频繁修改，需要去除WAR包中的版本号。这可以通过在`pom.xml`文件中配置`<build>`节点下的`<finalName>`标签实现，将其设置为固定的名称（如`myapp...
Angular 面试题
萌萌哒的瑞萌萌的博客
02-06 4097
Angular 是一个开放源代码的前端 Web 框架。它是最流行的 JavaScript 框架之一，主要由 Google 维护。它提供了一个轻松开发基于 Web 的应用程序的平台，并使前端开发人员能够管理跨平台应用程序。它集成了强大的功能，例如声明性模板，依赖项注入以及各种其他使开发路径更流畅的最佳实践。Angular 通常用于表示单页应用程序的 SPA 的开发。Angular 提供了一组现成的模块，可简化单页应用程序的开发。
Angular 设置打包后资源访问路径
记录工作开发中遇到的技术难点，方便自己查看，也希望可以帮助到他人...
05-23 1262
Angular设置打包后资源访问路径
用angular编写管理中台，放置于现有的非angular项目中
saintpeters的博客
07-30 333
创建angular项目 npm i -g @angular/cli ng new projectname –style=scss 创建全局通用header和aside: ng g c components/header ng g c components/aside 在 app.component.html写入 在src/app/目录下新建 app-routing.module.ts,作为项目...
【Angular】在html和ts中引用图片路径前端笔记
Key_wang的博客
07-21 680
图片的引用
Angular2 Build指定构建路径
idomyway的博客
02-07 3532
需求       我们在进行Angular开发时，一般情况下，不会将前台一次性构建完成，可能会进行多次build，尤其在我们写前后台交互的时候，后台代码和前台分开启动又会产生跨域的问题，所以较好的解决方法就是指定build的路径，请路径在后台项目中，这样我们在进行频繁的build时，就不用每次都拷贝了。解决方案"outDir": "dist",       在Angular项目中的根目录
在angular项目中,访问前端项目,添加公共路径
多看书少吃饭的博客
11-22 592
在angular项目中,访问前端项目,添加公共路径
Angular—引用图片等静态资源
雷雨天的雷胖子
02-11 3251
目录 一、概述 二、详解 一、概述 静态资源存放在assets文件夹。 二、详解 普通引入方式 直接在html模板中通过相对路径引用。 <h2>引入图片</h2> <img src="assets/images/nine.png" alt=""> 通过TS中定义的图片地址加载资源 export class NewsComp...
[Angular通过指令创建在指定文件夹下] Angular CLI Command - ng alias
faceqq的博客
02-04 3422
| Angular CLI 命令 Command Alias Purpose ng new 创建一个新的Angular 应用 ng serve Builds 和 runs Augular 应用 ng eject 2 < Angular版本< 6, webpack config 文件可编辑 ng generate component [name] ng g c [name] 创建组件 ng generate directive [name] ng g d [n
Angular加载配置文件
老杨头的博客
12-16 2066
在很多项目中，需要程序在启动时加载配置文件，根据配置参数运行程序。Angular单页应用中，可以在初始化方法（APP_INITIALIZER）中完成这一操作。 1、添加配置文件 项目的配置文件一般都存放在静态目录中，可以在assets文件夹下新建一个config文件夹用于存放配置文件。可以为调试环境和部署环境分别保存配置文件。 2、添加service读取配置文件 serve文件 app/core/services/config.service ： ...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值