工具链之 Vite 主要的构建选项（build）属性（四）

最新推荐文章于 2025-04-08 18:49:43 发布

**之火

最新推荐文章于 2025-04-08 18:49:43 发布

阅读量297

点赞数 1

分类专栏：前端工具链 Vite 文章标签：前端框架工具链前端

本文链接：https://blog.csdn.net/qq_35876316/article/details/139776253

版权

// vite.config.js  
export default {
     
  build: {
     
    outDir: 'build', // 构建输出到 build 目录 
    
    //（静态资源目录（相对于 outDir））
    assetsDir: 'static', // 静态资源输出到 build/static 目录

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

**之火

关注关注

1
点赞
踩
0

收藏

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

复制链接

分享到 QQ

分享到新浪微博

扫一扫
打赏
打赏
打赏举报

举报

专栏目录

Vue3通透教程【二】更高效的构建工具—Vite

官方推荐

02-06

6万+

为大家介绍新一款的构建工具——Vite，当然我们Vite更多的是被用于开发阶段，下面也为大家介绍到了 Vite 想比于 webpack 编译中的优势，以及Vite构建Vue3项目的步骤教程，赶快跟着我尝试一下吧！

Vite 源码解读系列（图文结合） —— 构建篇

qq_34621851的博客

02-25

1403

哈喽，很高兴你能点开这篇博客，本博客是针对 Vite 源码的解读系列文章，认真看完后相信你能对 Vite 的工作流程及原理有一个简单的了解。 Vite 是一种新型的前端构建工具，能够显著提升前端开发体验。我将会使用图文结合的方式，尽量让本篇文章显得不那么枯燥（显然对于源码解读类文章来说，这不是个简单的事情）。如果你还没有使用过 Vite，那么你可以看看我的前两篇文章，我也是刚体验没两天呢。（如下） Vite + Vue3 初体验 —— Vite 篇 Vite + Vue3 初体验 —— Vue3

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

vite构建build选项配置（2024-05-29）

hap1994的博客

05-29

4298

可以返回一个新的依赖关系数组，可能被过滤后变少了，也可能有更多依赖注入进来了，同时它们的路径也被修改过。将静态资源在构建后合并是框架的责任。最直观的示例是当你要兼容的场景是安卓微信中的 webview 时，它支持大多数现代的 JavaScript 功能，但并不支持。当启用时，在异步 chunk 中导入的 CSS 将内联到异步 chunk 本身，并在其被加载时一并获取。此选项允许用户为 CSS 的压缩设置一个不同的浏览器 target，此处的 target 并非是用于 JavaScript 转写目标。

保姆级教你用Vite构建第一个Vue3项目

qwerwejgw的博客

02-18

4264

vite开箱即用，无需任何配置

vite build

华灯初上

10-19

4491

vite在开发阶段采用的是按需加载的方式，不会将所有文件打包。但是生产环境的部署是需要进行打包的，这里它使用的是rollup打包方式。对于代码切割的需求，使用原生动态导入，因此打包后支持新浏览器，对IE的兼容性不是很好，但是可以用对应的polyfill解决。使用esbuild来处理需要pre-undle的在cli.ts的build命令中引入build.ts 调用doBuild方法，在这个方法中配置打包参数（input output plugin等）调用buildHtmlPlugin解析文件入口in

Vite.config.ts 有关build

weixin_43814775的博客

11-21

999

base: build-> assetsDir 结果：

Vite配置

smz的博客

07-21

554

vite 可以说是开箱即用，不用过多配置vite 利用ESM，不像webpack构建工具取分析引入，打包构建；而是直接保持模块化，省去编译时间，代码更改后构建速度提升构建生产环境下，使用了rollup。

工具链 之 Vite 依赖优化选项（五）

qq_35876316的博客

06-19

1551

rollupOptions 允许你覆盖 Rollup 的默认配置，Rollup 是 Vite 用于生产构建的打包器。你可以通过此选项来调整依赖打包的行为。assetsDir 选项用于配置静态资源（如图片、字体等）在输出目录中的位置。minify 选项用于配置是否压缩生产构建的输出代码，以及使用的压缩工具。cssCodeSplit 选项用于配置是否将 CSS 代码拆分成多个文件。这些选项与构建输出的大小和警告相关。

工具链 之 vite 简介(一)

qq_35876316的博客

06-13

1043

Vite使用Rollup作为默认的构建工具。通过运行npm run build命令，Vite会将应用程序的源代码打包成一个或多个优化的静态文件，以便在生产环境中进行部署。Vite的构建过程会根据需要进行代码拆分、压缩和优化，以提供最佳的性能和文件大小。

工具链 之 Vite 部署静态站点（六）

qq_35876316的博客

06-20

608

如果你希望将构建的输出放在不同的目录中，你可以在 vite.config.js 或 vite.config.ts 文件中配置 build.outDir 选项。如果你选择自己管理服务器而不是使用托管服务，你需要确保你的服务器能够正确地提供静态文件。这通常涉及到配置你的服务器来从 Vite 构建的输出目录中提供文件。一旦你有了构建好的静态文件，你就可以将它们部署到任何支持静态文件的服务器上。在项目的 package.json 文件中定义好npm 脚本命令。

vite简单介绍和配置整理

weixin_40429706的博客

11-15

2931

vite简单介绍和配置整理

Vite - 开发初体验，以及按需导入配置

CYK_byte的博客

06-09

4057

a）这里我们只需要在 vite.config.js 文件中引入 elementPlus 的解析器，然后把她交给 Components 按需引入插件即可.之后就可以观察到项目中多出了 node_modules 文件（这个文件中存放的就是下载好的依赖），然后通过 npm run dev 就可以成功了。c）接下来你会发现，在 Home.vue 组件中使用 Foo.vue 组件，就可以不用写 import 了~a）例如我们在 Home.vue 文件中使用 ref 写了一个计数器（点击按钮，count++）.

vite项目构建配置

qq_47040462的博客

07-30

1058

使用npm create vite@latest构建项目，配置项选项react->ts+SWC即可。让后打开项目npm i。

Vite的常见配置选项

m0_46543935的博客

07-16

2822

vite defineConfig Options 说明

vite入门/徒手搭建vite/配置vite/使用vite脚手架/vite步骤

最新发布

m0_51429350的博客

04-08

1163

（外部依赖排除）‌‌作用‌：声明不打包进最终产物的第三方依赖（如vuelodash），减小构建体积‌。‌配置示例‌：build: {external: ['vue', 'axios'] // 或使用正则表达式：/node_modules/});‌6.2 input（入口文件配置）‌‌单入口‌：input: 'src/main.js' // 默认入口路径‌‌多入口‌（多页应用）：input: {6‌.4output（输出配置）‌‌基础选项‌：dir：输出目录（默认dist）‌16。

vite 构建

m0_65730686的博客

09-15

486

vite 构建

Vite 基础配置

2302_77862232的博客

10-22

1425

如果配置文件需要基于（serve或build）命令或者不同的。

Vite 使用学习指南

qq_34185872的博客

05-29

3150

支持的框架不同：Vite 支持多种前端框架，包括 Vue、React、Angular 等，而 webpack 则需要通过相应的 loader 和 plugin 来支持不同的框架。构建方式不同：Vite 采用了基于浏览器原生 ES 模块的开发模式，可以在开发时快速启动应用，减少了冷启动时间，而 webpack 则是将所有模块打包到一个文件中。插件开发：Vite 提供了丰富的插件 API，可以通过编写插件来扩展 Vite 的功能，例如添加自定义的文件类型、自定义处理器、自定义中间件等。

快速入门Vite和Tailwind CSS构建Web原型教程

资源摘要信息:"vite-tailwind-template是一个使用Vite构建工具和Tailwind CSS库创建的前端项目模板，旨在快速搭建出顺风设计的网站原型。Vite是一个现代的前端构建工具，具备冷启动速度快和开发时热更新迅速的特点。...

工具链 之 Vite 主要的构建选项（build）属性（四）

工具链之 Vite 主要的构建选项（build）属性（四）