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

最新推荐文章于 2024-08-30 11:18:28 发布
最新推荐文章于 2024-08-30 11:18:28 发布
阅读量5.4k 收藏 1
点赞数 2
CC 4.0 BY-SA版权
分类专栏： WEB Angular 文章标签： angular base basePath
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/home_zhang/article/details/100514875
本文详细介绍如何正确配置前端项目中的静态资源路径，确保html文件能正确引用assets目录下的资源，包括图片等。通过修改index.html中的base标签、karma.conf.js中的basePath属性，以及发布时的目录设置，实现资源的正确加载。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

配置方法如下（以项目名称为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 1723
Angular Web App部署Linux Nginx Https 提示：这篇文章是基于内网的 互联网就开始将 WEB 服务从 HTTP 迁移到 HTTPS，而现在为了更快的推进 HTTPS 的普及，Chrome 将从 2018 年 7 月起标记所有的 HTTP 网站为不安全链接。 HTTPS 会逐渐成为 WEB 服务的标配，最最重要的是，它能给用户带来更安全、更好隐私保护的网络体...
Angular必问面试题及参考答案
大模型大数据攻城狮的专栏
05-19 1015
Angular是一个由Google维护的开源前端框架，用于构建动态的Web应用程序。它是基于TypeScript编写的，并且提供了一整套解决方案，包括数据绑定、路由、表单处理、HTTP客户端等。Angular使用组件化架构，使得开发者可以创建可重用的组件，这些组件可以封装模板、样式和逻辑。特点：组件化：Angular的组件化架构允许开发者将应用拆分成多个小的、独立的组件，每个组件都有自己的视图和逻辑。双向数据绑定：Angular提供了一个强大的数据绑定机制，允许开发者在模型和视图之间同步数据。
Angular—引用图片等静态资源
雷雨天的雷胖子
02-11 3125
目录 一、概述 二、详解 一、概述 静态资源存放在assets文件夹。 二、详解 普通引入方式 直接在html模板中通过相对路径引用。 <h2>引入图片</h2> <img src="assets/images/nine.png" alt=""> 通过TS中定义的图片地址加载资源 export class NewsComp...
将Angular应用部署到nginx子目录
robinz1001的博客
11-29 1841
将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官方推荐的两种...
Angular 设置打包后资源访问路径
记录工作开发中遇到的技术难点，方便自己查看，也希望可以帮助到他人...
05-23 1180
Angular设置打包后资源访问路径
用angular编写管理中台，放置于现有的非angular项目中
saintpeters的博客
07-30 317
创建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 开发
qt的博客
02-27 5706
Angular 企业实战开发 1. 概述 Angular 是一个使用 HTML、CSS、TypeScript 构建客户端应用的框架，用来构建单页应用程序。 Angular 是一个重量级的框架，内部集成了大量开箱即用的功能模块。 Angular 为大型应用开发而设计，提供了干净且松耦合的代码组织方式，使应用程序整洁更易于维护。 Angular Angular 中文 Angular CLI 2. 架构预览 2.1 模块 Angular 应用是由一个个模块组成的，此模块指的不是ESModule，而是 Ng
如何用ts搭建一个vue3通用项目底座 | 第三篇：vite配置
最新发布
pasco152的博客
08-30 1525
接下来进入项目搭建的重点部分：Vite配置。 本篇内容可能会有些多，耐心看完会有很多收获。
【Angular】在html和ts中引用图片路径前端笔记
Key_wang的博客
07-21 638
图片的引用
Angular2 Build指定构建路径
idomyway的博客
02-07 3488
需求       我们在进行Angular开发时，一般情况下，不会将前台一次性构建完成，可能会进行多次build，尤其在我们写前后台交互的时候，后台代码和前台分开启动又会产生跨域的问题，所以较好的解决方法就是指定build的路径，请路径在后台项目中，这样我们在进行频繁的build时，就不用每次都拷贝了。解决方案"outDir": "dist",       在Angular项目中的根目录
在angular项目中,访问前端项目,添加公共路径
多看书少吃饭的博客
11-22 571
在angular项目中,访问前端项目,添加公共路径
[Angular通过指令创建在指定文件夹下] Angular CLI Command - ng alias
faceqq的博客
02-04 3377
| 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 2011
在很多项目中，需要程序在启动时加载配置文件，根据配置参数运行程序。Angular单页应用中，可以在初始化方法（APP_INITIALIZER）中完成这一操作。 1、添加配置文件 项目的配置文件一般都存放在静态目录中，可以在assets文件夹下新建一个config文件夹用于存放配置文件。可以为调试环境和部署环境分别保存配置文件。 2、添加service读取配置文件 serve文件 app/core/services/config.service ： ...
如何在 Angular 项目中自定义引用路径
法研鲁迅的个人博客
05-27 1759
在项目的开发过程中我们总会出现这样的问题组件嵌套多，子组件想要使用顶层 `app` 定义的一些全局枚举或者常量以及一些其他数据的时候，使用**相对路径**引用的时候往往会比较繁杂，并且使引入路径代码看
实用：如何将aop中的pointcut值从配置文件中读取
只有变秃 才能变强
12-02 2380
背景 改造老项目，须要加一个aop来拦截所的web Controller请求做一些处理，由于老项目比较多，且包的命名也不统一，又不想每个项目都copy一份相同的代码，这样会导致后以后升级很麻烦，不利于维护。于是我们想做成一个统一的jar包来给各项目引用，这样每个项目只须要引用该jar，然后配置对应的切面值就可以了。 我们都知道，java中的注解里面的值都是一个常量， 如： @Pointcut("e...
在 angular6 中自定义 webpack 配置
weixin_44510284的博客
06-28 1302
在 angular6 中自定义 webpack 配置 我们已经使用 angular6 开发了一套后台管理系统，且体量日益增大，为了优化打包速度，想从 webpack 着手。 但是Angular Cli 6 禁用了webpack的自定义配置，官方似乎并未提供自定义配置webpack的方法；在此之前，可以使用ng eject把默认的webpack提取到代码中，进行自定义，但是 angular6 不支持了，只能使用 第三方库来实现。 1. 探索阶段–成功在 angular6 中使用 自定义 webpack 配置
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值