首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

在根文件夹中构建宗地构建,而不是./dist

在根文件夹中构建宗地构建,而不是./dist,是指在项目的根目录下进行构建,而不是在名为"dist"的文件夹中进行构建。

通常情况下,前端开发中的构建过程会将源代码转换、优化和打包,生成可部署的静态资源文件。而"./dist"是一种常见的约定,表示构建输出的目标文件夹为项目根目录下的"dist"文件夹。

将构建输出放在根文件夹中的优势在于:

  1. 简化部署:将构建输出放在根文件夹中,可以直接将整个项目文件夹部署到服务器上,无需再将"dist"文件夹中的内容复制到根目录。
  2. 统一路径:将构建输出放在根文件夹中,可以避免在代码中使用相对路径时出现路径错误的问题。所有资源文件的路径都相对于根目录,更加统一和可靠。
  3. 简化配置:有些构建工具默认将构建输出放在根文件夹中,如Webpack的默认配置就是将输出放在根目录下。如果遵循默认配置,可以减少额外的配置工作。

宗地构建的应用场景包括但不限于:

  1. 单页面应用(SPA):对于使用Vue、React等前端框架构建的SPA应用,将构建输出放在根文件夹中可以方便地将整个应用部署到服务器上。
  2. 静态网站:对于纯静态的网站,将构建输出放在根文件夹中可以直接将整个项目文件夹上传到静态网站托管服务中。
  3. 前后端分离项目:对于前后端分离的项目,前端构建输出放在根文件夹中可以与后端代码进行分离,便于独立部署和维护。

腾讯云相关产品和产品介绍链接地址:

  • 云开发(https://cloud.tencent.com/product/tcb):腾讯云提供的一站式后端云服务,支持前端开发、云函数、数据库、存储等功能,方便快速构建应用。
  • 云服务器(https://cloud.tencent.com/product/cvm):腾讯云提供的弹性云服务器,可满足各种计算需求,支持多种操作系统和应用场景。
  • 云存储(https://cloud.tencent.com/product/cos):腾讯云提供的对象存储服务,可用于存储和管理各种类型的数据,具备高可靠性和可扩展性。

请注意,以上仅为示例,实际选择适合自己项目需求的产品和服务时,需要根据具体情况进行评估和选择。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

给初学者的Gulp教程(译)

我们投入Gulp的学习之前,让我们来讨论一下,为什么你可能希望使用Gulp,不是其他相似的工具。 为什么选择Gulp?...,不是全局安装,这就是为什么命令行有些不一样。...这儿有多个文件夹,我们需要从app文件夹编译到dist文件夹,比如字体文件夹。让我们来做这件事。 将字体文件夹赋值到Dist文件夹 由于字体文件已经压缩了,所以我们不需要做额外的事。...我们可以命令行通过gulp命令运行这个任务。 我们也构建了第二个任务,build,创建一个dist文件夹给生产用网页。...我们编译Sass为CSS,压缩我们所有的资源文件以及复制必要的文件夹dist文件夹。我们可以命令行运行gulp build来运行这个任务。

4.3K20

深入了解Webpack

一旦脚本经历了成功,你可以看到 DIST / bundle.js 飞行不生成的文件,但在你真正的创建 DIST / 文件夹。 剩下的唯一事情就是现在将 dist / 文件夹上传到Web服务器。...最终,您的Webpack构建管道将变得更加复杂,并且最终 dist / 文件夹包含两个以上的文件。突然,文件夹变得一团糟,因为您不知道哪些文件属于最新版本。...最好的办法是,每个Webpack构建中都从一个空的 dist / 文件夹开始。 假设我们要在每个Webpack构建中擦除 dist / 文件夹。...通过这种方式进行设置,您将永远不会在 _dist / 文件夹中找到来自较旧Webpack构建的文件,这非常适合仅将整个 dist / 文件夹投入生产。...命令行上,键入npm run build:analyze。然后,检查您的 dist / 文件夹是否有新文件。

6.8K75

Webpack 详解

一旦脚本经历了成功,你可以看到 DIST / bundle.js 飞行不生成的文件,但在你真正的创建 DIST / 文件夹。 剩下的唯一事情就是现在将 dist / 文件夹上传到Web服务器。...最终,您的Webpack构建管道将变得更加复杂,并且最终 dist / 文件夹包含两个以上的文件。突然,文件夹变得一团糟,因为您不知道哪些文件属于最新版本。...最好的办法是,每个Webpack构建中都从一个空的 dist / 文件夹开始。 假设我们要在每个Webpack构建中擦除 dist / 文件夹。...通过这种方式进行设置,您将永远不会在 _dist / 文件夹中找到来自较旧Webpack构建的文件,这非常适合仅将整个 dist / 文件夹投入生产。...命令行上,键入npm run build:analyze。然后,检查您的 dist / 文件夹是否有新文件。

6.2K20

深入了解Webpack 5

一旦脚本经历了成功,你可以看到 DIST / bundle.js 飞行不生成的文件,但在你真正的创建 DIST / 文件夹。 剩下的唯一事情就是现在将 dist / 文件夹上传到Web服务器。...但是,为了本地检查 dist / 文件夹是否具有远程Web服务器上运行应用程序所需的一切,请使用本地Web服务器亲自进行尝试: npx http-server dist 它应该输出一个URL,您可以浏览器访问它...最终,您的Webpack构建管道将变得更加复杂,并且最终 dist / 文件夹包含两个以上的文件。突然,文件夹变得一团糟,因为您不知道哪些文件属于最新版本。...最好的办法是,每个Webpack构建中都从一个空的 dist / 文件夹开始。 假设我们要在每个Webpack构建中擦除 dist / 文件夹。...这意味着我们可以每个Webpack版本删除 dist / 文件夹的内容。

3.5K30

《Vue3.0抢先学》系列之:一个简单的例子

yarn npm run build #如果你用的是 npm 经过几十秒炫酷的命令行刷屏之后,构建完成了。...之后,我们可以看到packages下的各个子项目文件夹,有已经生成好的dist目录,里面躺着几个文件,命名不太一样,有的文件名中有prod后缀,有的则没有,这个代表经过压缩的或不压缩的js;有的包含了...开始写代码咯,让我来先初始化一下我的示例项目:建一个文件夹,下面的文件结构如下图所示,有css和js目录,分别存放示例代码要用到的样式、vue的js库文件、以及我们编写的示例js代码文件; index.html.../js/main.js"> 接着,我要开始编写上面预想的界面了。我将它拆分成两个组件(红色部分的组件,以及蓝色部分的子组件): ?...其实,这里的createComponent()函数也不是必须的,完全可以去掉,它的存在是为了当我们使用TypeScript编写代码时,利用TypeScript的类型推断机制开发工具里(如VSCode)

1.2K20

Dockerfile 的 multi-stage 特性,Vue 项目多阶段构建实战

但是之前镜像构建之前是需要使用 npm 进行项目打包生产 dist 文件之后才能进行镜像构建,不过最近我使用 Jenkins pipeline 的时候突然想到了 Dockerfile 的多阶段构建,...可以看到,上面的两个步骤,使用了不同的环境,打包静态资源的时候是 node 环境,最终的运行环境是 nginx 基础镜像,所以这很符合多阶段构建的场景。...多阶段构建步骤 Dockerfile 的 multi-stage 特性允许一个 Dockerfile 引用多个基础镜像,可以对每个引用的镜像进行单独的操作,然后可以将每个镜像的文件等内容进行传递。...dist 资源文件夹了,这个时候就开始从 nginx 基础镜像进行构建,需要执行的目录就是从第一个镜像把生成的目录复制过来即可。...from=xxx 这个 --from 参数表示的就是从某个构建阶段的镜像复制,不是从本地,这个也即是多阶段构建的精髓所在,就是镜像之前可以传递文件。

89120

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

当 build 命令执行完成后,项目路径下 dist 文件夹以项目名称命名的文件夹就是我们需要部署的文件。...代码仓库即可,之后 github 会自动完成应用的部署工作 因为 git 默认是会忽略编译生成的 dist 文件夹的,此时,想要把编译生成的文件推送到远程仓库,你需要修改 .gitignore 文件...,或是通过 subtree 的形式,将 dist 文件夹作为一个分支推送到远程服务器 # 创建并切换到 gh-pages 分支 git checkout -b gh-pages # 将 dist 文件夹下的文件添加到...,使用到了 npm ci 不是 npm install,从命令的名称就可以看出,ci 主要是各种自动化环境构建时使用,通过读取 package-lock.json 文件中所包含的具体的依赖版本信息来加快还原过程...当我们添加了环境变量之后,还需要对我们的实际执行的 npm 命令脚本进行一个调整 本地执行发布命令时,本地的 git 配置已经包含了相关的账户信息,当在 workflow 执行时因为处于一个匿名的状态

1.4K10

Webpack实战-构建同构应用

为了解决以上问题,有人提出能否将原本只运行在浏览器的 JavaScript渲染代码也服务器端运行,服务器端渲染出带内容的 HTML 后再返回。...构建同构应用的最终目的是从一份项目源码构建出2份 JavaScript代码,一份用于浏览器端运行,一份用于 Node.js 环境运行渲染出 HTML。.../dist/bundle_server'); const app = express(); // 调用构建出的 bundle_server.js 暴露出的渲染函数,再拼接下 HTML 模版,形成完整的.../dist/bundle_server.js 文件。 执行命令 webpack 构建出用于浏览器环境运行的 ....可以看到服务器返回的是渲染出内容后的 HTML 不是 HTML 模版,这说明同构应用的改造完成。 本实例提供项目完整代码

95810

前端微服务架构下CICD构建单镜像落地方案

目录大致是这样的 └── daas-web/ # 文件夹 | ├── child/ # 存放所有微应用的文件夹 |...,清空或创建存放制品的目录 接着触发自身和其他应用的相同tag的流水线,并行执行多条跨项目流水线 然后将每个应用编译出来的制品dist目录都存放到制品目录 最后在制品目录构建镜像,最后推送到harbor​...job可以使用关键词extends 来继承模版,使用此方法job也可以覆盖模版的配置。...由于aio的流水线,存在制品依赖的关系,构建docker镜像的job,需要获取到所有应用的制品,gitlab ci/cd提供了need关键词来是实现制品依赖–跨项目流水线的制品,一个job...构建完成后,改成对应的版本号,推送到harbor。harbor相关变量 以及镜像相关变量是定义项目的 CI/CD变量

65310

Ant 简易教程

但如果出现 'ant' 不是内部或外部命令,也不是可运行的程序或批处理文件 说明安装失败:(可以重复前述步骤,直至安装成功。) 2 例子 安装和配置成功后,我们就可以使用ant了。...3.1 Project 元素 project 元素是构建文件的元素。 一个 project 元素可以有多个 target 元素,一个 target 元素可以有多个 task。...例子的名字就是 MyProject。 default属性,指示这个 project 默认执行的 target。本文的例子,默认执行的 target 为 dist。...如果我们输入命令 ant 时,不指定 target 参数,默认会执行 dist 这个 target。 basedir属性,指定路径的位置。...此外,还有其他几个未出现在构建文件的属性。 if属性,验证指定的属性是否存在,若不存在,所在target将不会被执行。

1.1K100

Gradle学习笔记 Gradle命令行

首先我们先新建一个文件夹gradle-learn,然后在其中新建一个build.gradle,这是Gradle的项目构建文件。...现在我们运行dist不运行test:gradle dist -x test。然后查看一下输出,我们会发现输出非常有趣。...选择构建文件 默认情况下Gradle会选择当前文件夹下的build.gradle作为构建文件。我们也可以手动使用-b参数指定其他的构建文件。...对于多个文件夹构建项目,还可以使用-p参数指定要使用的构建文件的文件夹,例如我们将subdir构建文件重命名为build.gradle,然后运行gradle -q -p subdir hello,...获取构建信息 列出项目 我们可以通过build.gradle文件添加description = ...来为项目添加描述信息。

73910

一小时的时间,上手 Webpack

为什么要用构建工具?如果你只会js+css+html,最多再加上jquery,那么当你听到构建工具这个说法是不是蒙的?...因为像es6、less及sass、模板语法、vue指令及jsx浏览器是无法直接执行的,必须经过构建这一个操作才能保证项目运行,所以前端构建打包很重要。...然后项目根目录创建src文件夹dist文件夹,src文件夹里创建index.js及hellowebpack.js两个文件,最后dist目录创建一个index.html文件,完整目录如下: ?...我们dist目录下的indext.html文件创建如下内容,浏览器打开此页面就能看到效果。 <!...这里讲解es6解析,原生支持js解析,但是不能解析es6,需要babel-loader ,babel-loader 又依赖babel。

78720

angular-cli.json配置参数解释,以及依稀常用命令的通用关键参数解释

标记该应用是否已经执行过eject命令把webpack配置释放出来 }, "apps": [ { "root": "src", // 源码根目录 "outDir": "dist...", // 编译后的输出目录,默认是dist/ "assets": [ // 记录资源文件夹构建时复制到`outDir`指定的目录 "assets", "favicon.ico...serve --host (self) 指定本地Server绑定的域名,默认值:localhost.如果希望使用self来访问你的站点,须加入以上参数 2.ng serve --hmr 注意开启之后,只是angular-cli...--base-href 指定站点的起始路径,如果你希望你的站点路径为www.abc.com/mypath/,需要这样设置:ng build --base-href /mypath/ 6....--target 指定构建的目标,默认值是development,如果指定为production,构建时会加入treeshaking、代码压缩混淆等。

1.6K30

Vue 07.webpack

webpack官网 webpack webpack 是前端的一个项目构建工具,它是基于 Node.js 开发出来的一个前端工具; webpack4安装 项目根目录运行下面命令将webpack和webpack-cli...这会将项目中的 webpack 锁定到指定版本,并且使用不同的 webpack 版本的项目中,可能会导致构建失败。.../bundle.js --mode development webpack3 webpack src/js/main.js dist/bundle.js webpack配置文件 项目根目录创建webpack.config.js...的src属性为 实现自动打开浏览器、热更新、端口号、路径 注意:热更新JS中表现的不明显 方式1(推荐) 修改package.json...loader 加载器 webpack处理第三方文件类型的过程: 发现要处理的文件不是JS文件,去配置文件查找有没有对应的第三方 loader 规则 如果能找到对应的规则, 就会调用对应的 loader

76820

Vue+tp6 php框架如何快速建立一个前后端分离项目

这里的资源会被webpack构建;     2)components:组件目录;     3)router:前端路由;     4)App.vue:组件;     5)main.js:入口js文件;...目录下新建一个views目 2、views目录下新建User.vue   3、router目录下的index.js里面配置路由路径 4、User.vue,实现简单的页面 ...style> 5、配置api和跨域问题 ,修改 config/index.js 文件 之后我们就可以使用 /api 代替我们的接口地址了, 回到我们的 User.vue 文件,写我们的 axios 页面...,我们点击 获取用户 按钮, 应该看到了变化 我们后端的测试接口,返回给了前端用参数处理过的数据 5.打包vue项目 1、我们开发完成后,正式部署并不是用开发环境 的 npm run dev ,通常是会使用打包命令...Opening index.html over file:// won't work. 2、打包好后,可以项目文件夹,看到一个 dist 文件夹,这就是打包好的项目文件夹了,我们可以使用 nginx

3.9K31

使用Yarn workspace,TypeScript,esbuild,React和Express构建 K8S 云原生应用(一)

要设置它们的每一个,我们既可以使用 yarn init(每个文件夹),也可以手动创建文件(例如,通过 IDE)。 软件包名称使用的命名约定是每个软件包之前都使用 @my-app/* 作为前缀。...文件 本教程,common 软件包将非常简单。首先,从添加新文件夹开始: src/ 文件夹,包含包的代码。...我们的构建脚本现已完成!我们需要做的最后一件事是我们的 package.json 添加一个新命令,以方便地运行构建操作。.../scripts/build.ts" // Add this line here } } 现在,您可以每次对项目进行更改时从项目的文件夹运行 yarn build 来启动构建过程(如何添加hot-reloading...我们的案例,我们希望有一个可以运行 Node.js 应用程序的环境。 WORKDIR 设置容器的当前工作目录。 COPY 将文件或文件夹从当前本地目录(项目的根目录)复制到容器的工作目录。

4.1K31
领券