ng build打包项目指定网址前缀

最新推荐文章于 2023-10-04 16:21:36 发布
最新推荐文章于 2023-10-04 16:21:36 发布
阅读量631 收藏
点赞数
CC 4.0 BY-SA版权
分类专栏： 前端 文章标签： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/leadseczgw01/article/details/127267368
本文介绍如何使用Angular CLI命令为项目打包后的index文件中的资源添加特定前缀，以解决部署到子路径时遇到的问题。

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

        问题如下图红线所示，项目打包后，index文件中的base href和静态资源都指向根路径，一般情况下，都需要部署到某个路径下，需要额外添加前缀，才能成功访问。

         使用如下命令则可以在打包后，给index文件中的资源添加前缀/smfweb/。

ng build --base-href /smfweb/ --deploy-url /smfweb/

Javaweb+Angular项目避免打包后找不到静态资源文件的措施
oneloser的博客
06-02 2667
Javaweb+Angular项目避免打包后找不到静态资源文件的措施 1、前端创建的angular项目的名称应该和后端创建的java项目的名称保持一致； 2、package.json中的build需要通过–base-href来指定静态资源的路径，具体如下： "build": "ng build --base-href ./", //开发环境 "build:prod": "ng build --pr...
前端项目快速部署到 Nginx 服务器 及 常见问题
zic_liu的博客
07-12 1744
知识点 什么是 Nginx? Nginx 是一个高性能的http服务器及反向代理服务器 Nginx 的特点？ 热部署；可以高并发连接；cpu、内存等资源消耗却非常低；运行非常稳定；处理响应请求很快等 应用场景？ http服务器。Nginx是一个http服务可以独立提供http服务。可以做网页静态服务器。（本文重点） 虚拟主机。可以实现在一台服务器虚拟出多个网站。例如个人网站使用的虚拟主机。 反向代理，负载均衡。当网站的访问量达到一定程度后，单台服务器不能满足用户的请求时，需要用多台服务器集群可以使用ng
angular2 ng build部署后base文件路径问题详细解答
08-29
本篇文章主要介绍了angular2 ng build部署后base文件路径问题详细解答，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
ng build --base-href的设定问题
weixin_34112900的博客
12-19 1888
项目构建部署中遇到的问题： 1.不使用hash，如何解决刷新页面404的问题？ 说明： root 指定项目地址路径，默认为nginx下的html index 默认访问index文件 try_files 这里其实是由if变过来的，意思是如果uri存在，那就访问uri资源，如果uri不存在，那就访问改目录下的index.html文件，由此解决刷新页面404错误。 2.两层文...
《Angular之ng build部署后base文件路径问题》
杨晓风 迷迭香的记忆
09-30 7263
前言：                                                             千锤万凿出深山，烈火焚烧若等闲。 正文：    一。问题描述         使用angular-cli搭建的项目，执行ng build后，浏览器打开空白，界面显示一直loading.    二。问题定位         文件路径不对，使用ng new...
ng build部署后base文件路径问题以及更改IP地址和端口号
shane的博客
02-15 1547
在package.json文件中更改一下内容 "build":"ng build --base-href ./" base-href后面替换成打包后的base路径   打包时 执行以下命令 npm run build   angular的默认配置地址是localhost:4200;那么如何改变默认ip以及端口号呢； 首先我们打开package.json文件； 在ng se...
提高Webpack打包速度：webpack-ng-dll-plugin实践指南
资源摘要信息:"webpack-ng-dll-plugin是一个专门为Angular项目版本设计的dll插件，它提供了一种非常规的方法来提高项目的打包速度，以及实现代码前缀和微前端依赖共享。这个插件是通过将部分依赖代码预先打包成dll...
webpack-ng-dll-plugin:ng版本可用的dll插件，路子比较野
04-05
首先根据个人熟悉程度选择@angular-devkit/build-webpack ， @angular-builders/custom-webpack ， ngx-build-plus 第一个是官方的，后两个是第三方的，但是确认你有练过之前，请不要选择官方的...作者在测试的时候...
AngularJS项目中Bootstrap日期时间选择器的使用指南
- `dist` 或 `build`：存放项目构建后的文件，这些文件用于生产环境。 - `node_modules`：存放通过npm或yarn安装的依赖包。 - `index.html`：项目入口文件。 - `package.json`：记录项目依赖和脚本配置等信息。 - `...
angularjs cli执行ng build命令文件路径错误解决
“明明很开心”的博客空间
04-24 569
angularjs cli执行ng build命令打包文件时，加载的所有js路径错误， 执行使用命令 ng build --base-href ./ 即可解决问题
angular应用PWA中缓存资源的路径问题（deployUrl）
generalfyx的博客
02-12 788
引言 Angular自带PWA NPM包可以供我们使用，减少了我们自己对service Worker的配置，但在应用中总会出现一些问题，这些问题可以通过虚拟路径ngsw/state来详细查看。 问题现象 前段时间在离线应用部署中发现，当我们的Deploy Url即项目名存在时，离线资源总是会请求网络资源，并且不会缓存到worker中，后来查看ngsw/state发现service worke...
angular 6 学习四：部署到tomcat
lianghyan的专栏
10-28 780
1.修改 \src\app\app.module.ts文件，加上 useHash:true 2. 执行命令： >ng build --prod --base-href ./ 在工程目录下面产生一个dist目录。 将dist目录中的工程拷贝到tomcat webapps下即可以。 我在本地用其他命令做build，均无法在tomcat下正确显示页面， 如：>ng build...
一个ng 错误提示的解决
编程日志
07-11 5023
一个ng提示错误的解决办法：Error: Could not find the '@angular-devkit/build-angular:dev-server' builder's node package。
Angular 路由学习小结
最新发布
weixin_42238231的博客
10-04 233
路由对于任何前端框架或库来说都是必不可少的。只加载一次应用，即可通过客户端路由向用户显示不同的内容，从而使单页应用成为可能。构建单页应用。这意味着当 URL 改变时，我们实际上并不会从服务器加载新页面。相反，路由器在浏览器中提供基于位置的导航。它允许我们在不刷新页面的情况下改变用户看到的内容以及 URL。
vue项目 前端加前缀(包括页面及静态资源)
qq_20236937的博客
08-01 3393
vue项目 前端加前缀(包括页面及静态资源)
packer-ng多渠道快速打包
fuzhongbin的博客
03-18 946
步骤一： 1.在整个工程的build.gradle中添加依赖： dependencies { compile 'com.mcxiaoke.gradle:packer-ng:1.0.7' } 2.在Module的build.gradle中配置 apply plugin: 'packer' dependencies { compile 'com.mcxi...
《Angular6之ng项目搭建、构建、部署简介》
杨晓风 迷迭香的记忆
02-02 2953
前言： 随着Angular的深入发展，Angular6版本的框架部署较之前有了变化，至于变化是什么？请随小编一起来看看吧。 正文： Angular5.x 用@angular/cli脚手架搭建的工程，配置文件名称为： .angular-cli.json, 内容详情如下： { "$schema": "./node_modules/@angular/cli/l...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

kenick

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值