angular-cli ng build 打包完成后打开文件显示空白

最新推荐文章于 2023-05-23 14:35:26 发布

转载最新推荐文章于 2023-05-23 14:35:26 发布 · 916 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/MainActivity/p/9197898.html

文章标签：

#javascript #ViewUI

本文介绍如何将HTML文件中的基路径从/更改为./，并解释了为何这种更改对于正确打包和部署网站是必要的。文章还提到了在模拟服务器环境下通过HBuilder打开已打包的index.html文件的方法。

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

将index.html 里面的<base href="/">

改为<base href="./">

前面加一个点就好了，然后再次打包。

不能直接在本地打开，需要模拟服务器环境打开才可以。

可以拖入HBuilder中打开打包好后的index.html 然后Ctrl+R

转载于:https://www.cnblogs.com/MainActivity/p/9197898.html

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

清，纯一色

关注关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

Vue 2.x脱坑记 - 查漏补缺(汇总下群里高频询问的xxx及给出不靠谱的解决方案)

CRPER

11-07

1万+

前言文章内容覆盖范围,芝麻绿豆的破问题都有,不止于vue; 给出的是方案,但不是手把手一字一句的给你说十万个为什么!有三类人不适合此篇文章: “喜欢站在道德制高点的圣母婊” – 适合去教堂 “无理取闹的键盘侠” – 国际新闻版块欢迎你去 “有一定基础但又喜欢逼逼的人” 得得得,老子知道你厉害了,你好牛逼,这些问题那么简单,都是小白看的这种傻瓜文,简直浪费老子的时间! 对于以上三类人,走吧,这里

Generating browser application bundles 的 sealing 阶段

最新发布

孔乙己的博客

09-03

1355

这条消息在 npm 构建过程中的出现，意味着你的 TypeScript 项目正在一个关键阶段进行模块的打包封装工作。理解这个阶段的细节和优化策略，对于提升应用性能和开发效率至关重要。通过实际案例，我们深入分析了从依赖解析到模块处理、最终到优化的一整套流程，并展示了如何在真实项目中应用这些思想。无论是 Angular、React 还是 Vue.js 项目，合理配置构建工具和优化策略，都可以显著增强用户体验。希望这些信息对你在 TypeScript 项目的开发过程中有所帮助。

参与评论您还未登录，请先登录后发表或查看评论

vue项目打包访问index.html页面出现空白

muzidigbig的博客

01-04

9701

错误现象： 1.主要的问题就是路径问题因为index.html里边的内容都是通过script标签引入的，而你的路径不对，打开肯定是空白的。只要修改config文件夹里的index.js里的assetsPublicPath的值； config/index.js assetsPublicPath默认的是 ‘/’ 也就是根目录。而我们的index.html和static在同一级...

c 的html文件打开空白,build之后直接打开index.html是空白的,看不了。

weixin_39849070的博客

06-28

463

dev模式下一切正常的；build之后打开dist里面的index.html直接白屏我看是404，将index.html改成相对路径，还是不行name="viewport"content="width=device-width,initial-scale=1"/>console里面是这样的app.51774c8b.js:6 [RcPress] No matching page found f...

【爬坑日记】npm build之后，打开dist文件夹下index.html为空白页

weixin_34203832的博客

06-29

3600

写完一个项目后，执行npm run build后，生成dist文件夹，用浏览器打开index.html文件会发现是空白页，报错如图说明引用路径错误需要去项目目录下的 config/index.js 文件修改build属性配置默认的是‘/’（根目录）修改成‘./’（当前目录）再执行 npm run build 复制代码...

angular build 之后，直接本地打开index.html运行

iwen08的博客

08-04

1774

在生成的dist目录下，做以下操作： 1.在index.html中删除 <base href="/"> 2.在index.html中删除所有 script 的 type="module"属性

angular2 ng build部署后base文件路径问题详细解答

12-09

问题：使用angular-cli搭建的项目，执行ng build后，浏览器打开空白，发现文件的路径不对解决方案：在package.json文件的scripts中添加命令： "build":"ng build --base-href ./" –base-href后面替换成打包后...

使用Angular CLI进行Build(构建)和Serve详解

11-28

本文将深入讲解如何使用Angular CLI进行构建（Build）和服务器（Serve）操作。 **1. Angular CLI Build** `ng build`命令用于编译Angular项目并将其输出到指定的目录。此过程包括以下几个关键步骤： - **编译项目...

【VSCode优化Angular模块】：模块化重构，效率与可维护性兼顾

VSCode与Angular项目概述 ## 1.1 VSCode简介 Visual Studio Code（VSCode）是由微软开发的一款轻量级但功能强大的源代码编辑器，它支持多种编程语言，并拥有一个丰富的扩展生态系统。VSCode以其直观的用户界面、...

ionic4&angular8使用命令ionic build --prod打包之后本地双击www/index.html浏览器无法访问，必须把www部署到web服务器上才能正常访问。

博客简介

09-18

2391

ionic4&angular8+打包之后本地双击访问www/index.html空白报错，只有把www部署到web服务器上才能正常访问。经过反复查阅资料，对比ionic3和ionic4工程配置（tsconfig.json）才发现，原来是使用了：ES6模块！报错信息： Access to script at 'file:///C:/Users/Administrator/Desktop...

Angular6项目的打包部署

白不懂黑的静的专栏

06-22

3905

一、摘要今天记录Angular6项目的打包部署。当我们开发好一套系统后，项目的部署也是很关键的一步。二、前提已经有一个正常的Angular6开发环境，并且在本地的开发环境中可以正常的启动，访问自己的angular项目。三、需求将项目打包后，放到服务器上，直接访问服务器地址，项目正常访问。四、具体过程 1、使用项目打包命令进行打包 ng build --prod --base-href /project_name/ 主要参...

Angular11(Cli) 在打包 ng build 后的常见问题处理方案

热门推荐

沐枫

04-21

1万+

前言：我自认为，到目前为止 Angular 框架始终保持着前端框架领域中的龙头老大位置，虽然在前端框架领域中有很出色的React.js和易上手的Vue.js框架。从使用以上3个框架的情况来看，我个人更喜欢Angular，尤其是在支持使用TyptScript以后，当然React和Vue都有，而且各个框架都有自己的特色，所以在选择时要根据项目大小、需求等方面来选择合适的前端框架，这里就不多说了...

Angular 设置打包后资源访问路径

记录工作开发中遇到的技术难点，方便自己查看，也希望可以帮助到他人...

05-23

1191

Angular设置打包后资源访问路径

Angular页面出不来，显示空白页面。。。

大强博客

10-31

9165

Angular页面出不来，显示空白页面。。。 ng serve -o --port 8888 启动正常， ng build --prod --base-href ./ 打包也正常，什么错误信息都没有。。。可能是selector名称和样式或者关键字冲突了。。。解决办法：修改selector名称例如： /** * 片库组件 * * @author 刘宏强 */ @...

Angular2-build文件打开白屏解决

细心程度决定你的成败

07-20

1949

解决方法只需要更改package.json 中的build设置为"build": "ng build --base-href ./",生成的文件就可以直接使用

angular解决打包空白问题

追梦猪的博客

10-17

1350

将index.html 里面的<basehref="/">改为<basehref="./">如图前面加一个点就好了，然后再次打包。本地是无法打开的，文件需要运行在服务器环境下，可以用自己配置的服务器打开也可以下载HBui...

angular2打包的坑

a452272215的博客

02-06

1497

cnpm安装的包路径前缀为_打包的时候会出错用npm安装就可以解决打包命令 ng build --prod 生成dist

Ionic框架实现视频播放器POC教程

- 使用命令行工具ng build来构建Angular应用，生成的生产版本应用文件。 - 使用npx cap copy ios命令复制必要的文件到iOS项目中，为iOS构建过程做准备。 - 使用npx cap run ios命令启动iOS模拟器或者真机调试应用...

angular-cli ng build 打包完成后 打开文件显示空白

angular-cli ng build 打包完成后打开文件显示空白