angular cli构建将静态文件放在给定项目的/dist根目录下

Angular CLI是一个用于快速创建、构建和测试Angular应用程序的命令行界面工具。它提供了一组命令，可以帮助开发人员更高效地管理和开发Angular项目。

在使用Angular CLI构建项目时，默认情况下，静态文件会被放置在项目的/dist根目录下。这些静态文件包括HTML、CSS、JavaScript和其他资源文件。这个/dist目录是用于存放构建后的应用程序文件的目录。

将静态文件放在/dist根目录下的优势是：

方便部署：将所有静态文件放在/dist目录下可以方便地将应用程序部署到任何支持静态文件托管的服务器上。
简化路径：将静态文件放在/dist根目录下可以简化文件路径的引用，不需要考虑文件的相对路径或深层嵌套的文件结构。
保持整洁：将静态文件放在/dist根目录下可以使项目结构更加整洁，将构建生成的文件与源代码分离，方便维护和管理。

应用场景：

静态网站：适用于构建静态网站，如企业官网、个人博客等。
Web应用程序：适用于构建基于Angular的Web应用程序，如管理后台、电子商务平台等。

推荐的腾讯云相关产品和产品介绍链接地址：

腾讯云对象存储（COS）：用于存储和托管静态文件，提供高可靠性和可扩展性。详情请参考：腾讯云对象存储（COS）
腾讯云云服务器（CVM）：提供可靠的云服务器实例，用于部署和运行Angular应用程序。详情请参考：腾讯云云服务器（CVM）
腾讯云内容分发网络（CDN）：加速静态文件的传输和分发，提供更快的访问速度和更好的用户体验。详情请参考：腾讯云内容分发网络（CDN）

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

如何在 Windows 上安装 Angular：Angular CLI、Node.js 和构建工具指南

什么是 Angular CLI？ Angular CLI 是用于初始化和使用 Angular 项目的官方工具。它使您免于复杂配置和构建工具（如 TypeScript、Webpack 等）的麻烦。...build (b): 将 Angular 应用程序编译到给定输出路径上名为 dist/ 的输出目录中。必须从工作空间目录中执行。 config: 检索或设置 Angular 配置值。...serve (s): 构建并服务您的应用程序，根据文件更改进行重建。 test (t): 在项目中运行单元测试。 update: 更新您的应用程序及其依赖项。...的配置文件 angular.json：包含 CLI 的配置 package.json：包含项目的基本信息（名称、描述和依赖项） README.md：包含项目描述的 markdown 文件 tsconfig.json...：TypeScript 的配置文件 tslint.json：TSlint（静态分析工具）的配置文件为您的项目服务 Angular CLI 提供了一个完整的工具链，用于在本地计算机上开发前端应用程序。

680 0

使用CircleCI2.0持续集成Angular项目

构建生产静态资源 npm run build 打包然后上传到服务器 tar -zcvf oneportal.gz -C dist ....每月构建时长1000分钟以内免费 (基本够用) 提供的构建环境配置2核CPU / 4G内存，(算是很慷慨了) 据测试如果是在1核1G的主机下执行npm run build很容易报内存不足有专门的配置文件来定义...具体实现 Angular项目根目录新建.circleci目录(注意以点开头)，然后在这个目录里面再新建config.yml文件下面是我正在使用的配置，具体语法可以见官方介绍 # Check https...通过之后将打包的待发布的静态资源上传到AWS存储。还有配置文件里限制了分支，只有往daily-build分支上合并代码才会触发CircleCI的构建。...当然，你可以直接通过SSH将项目传到站点服务器部署。也需要在后台配置下访问服务器的Key。效果： image.png

8064 0

如何将 Angular 项目部署到云开发静态网站托管

，你同样可以托管一个 Angular 项目，接下来，我就介绍一下应该如何将一个 Angular 项目部署到云开发静态网站托管服务中。...npm run build 来构建出最终的产出物 [quiuq.png] 在构建完成后,我们可以在 dist/cloudbase 中看到我们的项目构建产物。...上传文件完成了 Cli 的登陆后，接下来就可以上传文件了。...首先，进入到 Angular 项目的 dist 目录: cd dist/cloudbase，然后，执行命令来上传文件 tcb hosting:deploy -e envId 这里你需要将 envId 替换为你自己的环境...总结云开发的静态托管中想要上传 Angular 项目也十分简单，你只需要初始化一个 Angular 项目，并使用云开发的 CLi 工具就可以完成文件的上传。

2.2K3 0

Angular10配置webpack打包「详细教程」

使用CLI创建一个新的Angular项目从零搭建Angular10项目先决条件在开始之前，请确保你的开发环境已经包含了 Node.js® 和 npm 包管理器。...README.md 根应用的简介文档. angular.json 为工作区中的所有项目指定 CLI 的默认配置，包括 CLI 要用到的构建、启动开发服务器和测试工具的配置项，比如 TSLint，Karma...其子文件夹中包含应用源代码和应用的专属配置。应用支持文件目的 app/ 包含定义应用逻辑和数据的组件文件。 assets/ 包含要在构建应用时应该按原样复制的图像和其它静态资源文件。...对于多项目的工作空间，应用专属的端到端测试文件都位于项目各自的根目录下，即 projects/project-name/e2e/。...// 在`server`模式下，分析器将启动HTTP服务器来显示软件包报告。 // 在“静态”模式下，会生成带有报告的单个HTML文件。

4.8K2 0

Angular CLI 简介

使用Angular CLI生成 Angular 5项目如果您正在使用angular, 但是没有好好利用angular cli的话, 那么可以看看本文....今天主要通过以下几个方面介绍Angular CLI: 生成项目参数介绍配置和自定义CLI 检查和修复代码生成新项目: ng new my-app 这个命令会生成一个新的项目叫做my-app并把该项目的文件放在...接下来看看angular-cli.json这个文件: angular-cli.json: 它是angular cli针对该项目的配置文件. ...默认情况下, 它的输出目录在.angular-cli.json文件里ourDir属性配置的, 默认是/dist目录. build之后会看见dist里面有这些文件: inline.bundle.js 这是...如果需要Serve 其他js/css/assets文件: 放在.angular-cli.json就行, 例如jquery就应该放在scripts里面.

6K11 0

基于 Lerna 管理 packages 的 Monorepo 项目最佳实践

项目仓库中的根目录上就三个子模块的文件夹，分别对应三个 package，在熟悉了构建和发布流程后，有点傻了。...Monorep 是把所有相关的 package 都放在一个仓库里进行管理，每个 package 独立发布。例如：React, Angular, Babel, Jest, Umijs, Vue ......虽然拆分子仓库、拆分子 npm 包是进行项目隔离的天然方案，但当仓库内容出现关联时，没有任何一种调试方式比源码放在一起更高效。结合我们项目的实际场景和业务需要，天然的 MonoRepo !...于是我们使用 --hoist 来把每个 package 下的依赖包都提升到工程根目录，来降低安装以及管理的成本。...执行 babel 的编译，从 src 目录输出出 dist 目录，使用根目录的配置文件 babel.config.js。

2.9K6 1

【ASP.NET Core 基础知识】--前端开发--集成前端框架

强大的工具集： Angular生态系统包括Angular CLI（命令行界面）等工具，简化了项目的创建、构建和部署。这些工具能够提高开发效率，减少了配置的繁琐性。...需要强大工具支持的项目： Angular生态系统中的工具集，尤其是Angular CLI，提供了一整套的开发、构建、测试和部署工具，使得项目的管理变得更加高效。...ng build --prod 将构建后的文件部署到 ASP.NET Core 项目：将 Angular 应用构建后生成的 dist 文件夹中的内容复制到 ASP.NET Core 项目的 wwwroot...npm run build 将构建后的文件部署到 ASP.NET Core 项目：将 Vue 应用构建后生成的 dist 文件夹中的内容复制到 ASP.NET Core 项目的 wwwroot 文件夹中...一般情况下，命令可能类似于： npm run build 将静态资源部署到服务器：将生成的生产版本静态资源文件（通常位于项目的 build、dist 或 public 目录中）上传到服务器上。

400 0

Angular 工具篇之分析包的大小

本文将介绍如何使用 webpack-bundle-analyzer 和 source-map-explorer 这两款工具来分析 Angular Bundle 的大小。...： $ npm i webpack-bundle-analyzer --save-dev 接下来我们使用 Angular CLI 来构建项目，在构建的时候，需要添加相关参数，具体如下： $ ng build...--prod --stats-json 当项目构建完成后，在根目录下的 dist 文件夹下会生成一个 stats.json 文件，然后我们可以通过以下的命令来查看 webpack 打包文件大小信息：...建议感兴趣的同学，都自己动手实践一下。...prod --source-map 构建完成后，在根目录下的 dist 文件夹下会生成 main bundle 文件，这时我们可以在命令行执行下列命令来查看结果： $ node_modules/.bin

2.3K4 0

Angular 结合 Git Commit 版本处理

So，我们接下来用 Angular 实现下效果，React 和 Vue 同理。搭建环境因为这里的重点不是搭建环境，我们直接用 angular-cli 脚手架直接生成一个项目就可以了。...Step 1: 安装脚手架工具 npm install -g @angular/cli Step 2: 创建一个项目 # ng new PROJECT_NAME ng new ng-commit Step...记录每次提交的信息在根目录创建一个文件version.txt，用于存储提交的信息；在根目录创建一个文件commit.js，用于操作提交信息。...在根目录中新建文件version.js用来生成版本的数据。...major.minor.patch:beta，如：1.1.0:beta 测试环境版本信息是 major.minor.path-data:hash，如：1.1.0-2022.01.01:4rtr5rg 方便管理不同环境，我们在项目的根目录中新建文件如下

9793 0

Angular CLI 常用终端操作命令

Github Pages或者Firebase 组件| ng g component home/component/my-new-component //相对生成组件生成位置在项目的根目录的...关CLI构建编译项目 ---- 输入命令 ng build 来编译项目，生成编译后的文件存放目录在项目根目录下 dist/ 目录下面关于...CLI 构建正式服务器打包文件和测试环境文件还有本地文件 ---- ng build 可以同时指定要与该构建（或）一起使用的构建目标（ --target...默认情况下，使用开发构建目标和环境。...--environment=dev--environment=prod 可以在 angular-cli.json 该文件中配置映射编译环境路径 //angular-cli.json

2K4 0

一张图教你快速玩转vue-cli3

前言本文系统的梳理了vue-cli3搭建项目的常见用法，目的在于让你快速掌握独立搭建vue项目的能力。...browserslistrc 文件来指定项目的目标浏览器的范围。...= { // 默认情况下 babel-loader 会忽略所有 node_modules 中的文件。...5.配置单/多页面 vue-cli默认单页面结构，我们可以通过配置文件来将项目配置成多页面： // vue.config.js const path = require('path') module.exports.../usr/bin/env sh # 当发生错误时中止脚本 set -e # 构建 npm run build # cd 到构建输出的目录 cd dist git init git add -A

2K1 0

Vue 3 和 Webpack 5 来了，手动搭建的知识该更新了

前言想必绝大多数用 Vue 开发过项目的同学，或多或少会有以下两种情况：用 Vue CLI 工具去搭建一个项目。在领导或同事搭建好的项目基础上做业务。...接下来在根目录添加如下 src 文件夹，并且在 src 文件夹内添加 main.js 文件，内容我们先不添加。...html-webpack-plugin 插件，将 index.html 作为模板，打出到 dist 文件夹。...理解与配置 babel 可以正常敲 Vue 代码之后，我们还要考虑一下代码的浏览器兼容情况，毕竟现代前端框架 Vue 、 React 、 Angular 等都是对浏览器有要求的。...babel 的使用方式它有三种使用方式：使用单体文件。命令行（babel-cli）。构建工具如 webpack 中的 babel-loader 插件。

1.8K3 1

vue3+element-plus+router+vuex+axios从零开始搭建(2)

首先配置开发环境，在项目根目录下新建三个文件，如果有测试环境还可以再加一个。...是两个特殊变量，在代码中始终可用 vue3.0 .env 文件配置全局环境变量在根目录下创建以下文件 .env 全局默认，任何环境都加载合并 .env.development 开发环境下的配置文件...vue.config.js 是一个可选的配置文件，如果项目的 (和 package.json 同级的) 根目录中存在这个文件，那么它会被 @vue/cli-service 自动加载。...由于项目初始化的时候没有vue.config.js配置文件，因此我们需要在项目根目录下新建一个vue.config.js配置项。...: 'dist', //构建时的输出目录 assetsDir: 'static',//放置静态资源的目录 indexPath: 'index.html',//html 的输出路径

1.4K4 0

Angular开发实践（六）：服务端渲染

Angular Universal Angular在服务端渲染方面提供一套前后端同构解决方案，它就是 Angular Universal（统一平台），一项在服务端运行 Angular 应用的技术。...这个项目与第一篇的示例项目一样，都是基于 Angular CLI进行开发构建的，因此它们的区别只在于服务端渲染所需的那些配置上。.../cli 的配置文件：.angular-cli.json 创建 Node Express 的服务程序：server.ts 创建服务端预渲染的程序：prerender.ts 创建 Webpack 的服务端配置...6、修改 @angular/cli 的配置文件：.angular-cli.json 在 apps 下添加： { "platform": "server", "root": "src",...，您必须部署dist/browser文件夹, 而不是dist文件夹 dist目录： ?

4.7K10 0

用Single-spa 创建基于 React 和 Vue 的微型前端

它使你可以在单页应用中使用多个框架，这样就可以按功能拆分代码，并能使 Angular、React、Vue.js 程序一起运行。...你可能已经习惯了 React 和 Vue 的 CLI，通过这些工具可以快速创建项目，并准备好 webpack 的配置、依赖项和样板代码等。...环境配置配置 Webpack 在主程序的根目录中，创建 webpack.config.js 文件并添加一下内容： const path = require('path'); const webpack...在 webpack.config.js 文件中，把入口设置为 single-spa.config.js。在项目的根目录中创建这个文件并进行配置。...如果以后 Single-spa 能够添加处理样板文件和初始项目设置的 CLI 会更好。如果你需要微前端这种类型的体系结构，那么 Single-spa 无疑是现在最成熟的方法。

1.7K2 0

Angular开发实践（一）：环境准备及框架搭建

因此想通过Angular开发实践这系列的文章分享下自己的所学，达到交流和分享的目的。...angular-cli npm install -g @angular/cli IDE推荐使用WebStorm 框架搭建 angular-start是我在GitHub上维护的一个起步项目，你可以直接下载作为基础开发框架来使用...这个文件夹之外的文件都是为构建应用提供支持用的。 ? src目录使用HTML模板、CSS样式和单元测试定义AppComponent组件。它是根组件，随着应用的成长它会成为一棵组件树的根节点。...根目录 src/文件夹是项目的根文件夹之一。其它文件是用来帮助我们构建、测试、维护、文档化和发布应用的。它们放在根目录下，和src/平级。 ?...根目录在e2e/下是端到端（end-to-end）测试。它们不在src/下，是因为端到端测试实际上和应用是相互独立的，它只适用于测试你的应用而已。

1.3K7 0

Angular Schematics 三部曲之 Add

/node_modules/.bin/tsc -p tsconfig.json" }, } 使用 Angular CLI 来创建项目的话一般来说就是第一种情况，比如创建一个库或者创建一个 schematics...，核心文件都会放在 src 目录。...初始化项目的原始模板文件删除 ng new 生成的重复文件（因为 schematic 无法自动替换文件）把原始项目模板文件拷贝到项目目录调整一下 package.json 和 angular.json...angular cli 的源码。...假设我们已经在项目的根目录创建了一个测试项目。npm link 其实就是将打包目录的快捷方式拷贝到 node_modules 中。

1.3K1 0

docker学习系列19 容器化Angular项目

开发阶段项目根目录添加Dockerfile文件 # base image FROM circleci/node:10.14-browsers USER root # set working directory...，指定构建docker镜像时不希望发送给Docker daemon的文件。...也就是不希望被打包进镜像的文件。防止镜像过大。 node_modules .git 构建镜像 docker build -t angular-demo ..../cli # add app COPY ....，首先利用临时Node镜像生成静态资源，然后将静态资源拷贝到nginx镜像中进行托管。

1.6K6 0

使用 Github Actions 自动部署 Angular 应用到 Github Pages

整个项目中所涉及的 npm 命令，我们可以通过查阅项目的 package.json 文件中的 scripts 节点进行查看这里通过 Angular CLI 创建的项目可以通过 ng build 命令来完成项目的打包发布...当 build 命令执行完成后，项目根路径下 dist 文件夹中以项目名称命名的文件夹就是我们需要部署的文件。...，或是通过 subtree 的形式，将 dist 文件夹作为一个分支推送到远程服务器 # 创建并切换到 gh-pages 分支 git checkout -b gh-pages # 将 dist 文件夹下的文件添加到...prefix dist origin gh-pages 当然，这样还是显得有些麻烦，对于 angular 应用来说，我们完全可以使用社区提供的 angular-cli-ghpages 插件来简化这个操作...首先我们需要通过 npm 将插件安装到需要部署的程序中 ng add angular-cli-ghpages 安装完成之后，我们就可以通过 ng deploy 命令来完成部署，插件会自动把打包生成的文件发布到

1.4K1 0

前端工程化：Webpack之常见配置详解

但可能在创建前端项目时，都只是用脚手架vue-cli的初始化命令跑一下，将webpack当成一个黑盒使用，刚开始我也是这样，但是虽然一切配置都能通过脚手架自动完成，我们不用学会如何手动去配置，但是我们也至少应该知道...webpack-cli@4.7.2 -D 4、常用配置和基本使用 4.1 在项目中配置 webpack ① 在项目根目录中，创建名为 webpack.config.js 的 webpack 配置文件...webpack 在开始打包构建之前，会先读取这个配置文件，并基于我们在配置文件中给定的配置，对项目进行打包，并生成dist文件夹，存储打包后的项目文件。...应在 src文件夹下的 index.html 源代码中导入 dist 文件下的打包好的js文件，打包后的bundle.js文件会解析转换index.js文件下的内容，使得任何版本的浏览器都能兼容。...，webpack-dev-server 会启动一个实时打包的 http 服务器 http://localhost:8080，打开网址后，会呈现我们项目的根目录结构（下面会说明如何配置更改网址）点开src

1.2K1 1

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云