认识vite

嚣张丶小麦兜2025-12-24 19:28

vite是什么

脚手架

帮助我们搭建开发环境的项目代码的工具

构建工具

将代码从开发环境构建到生产环境

构建工具的发展

1、第一代构建工具：以npm script、grunt、gulp为代表，这一代的构建工具所做的事情主要就是编译（scss、less编译成css）、合并、压缩等工作

2、第二代构建工具：以browserify、webpack、parcel、rollup为代表的构建工具，这一代工具加强了对模块的处理，能够对模块的依赖关系进行处理，对模块进行合并打包

3、第三代构架工具：主要是以"绣化"的方向发展，使用Rust将前端工具链重构一遍

Babel -》swc

postCss -》lightingCss

electron -》dprint

webpack -》 Turbopack

rollup -》 rolldown

脚手架的发展

脚手架本身是帮助开发者搭建开发环境项目的工具，但是现代脚手架往往会内置构建工具

VueCli：内置了webpack作为构建工具

现在脚手架和构建工具界限比较模糊，可以认为构建工具作为了脚手架工具的一部分

vite也是相同的情况：

1、脚手架：可以搭建各种类型（vue、react、Sevlte、Solid.js）的项目

2、构建：包含两个构建工具

esbuild：用于开发环境

rollup：用于生产环境

vite核心原理

webpack的痛点

在构建大型项目的时候，非常慢，因为在启动webpack项目时候，webpack会先对项目进行打包，然后运行的是打包后的文件

vite是如何解决的

跳过打包步骤，利用浏览器的imports机制，按需获取内容

vite热更新

底层是由websocket来实现的

vite的配置文件

普通配置

设置项目的基本选项，别名、根目录、插件...

1、root

默认值：process.cwd( ) ，默认就是项目根目录

描述：index.html 所在位置，可以是绝对路径，也可以是相对于当前工作目录的路径。

例如：

js 复制代码 
my-project/
├── public/
│   └── index.html
├── src/
│   ├── main.js
│   └── App.vue
└── vite.config.js

这个时候就可以使用 root 来进行配置：

js 复制代码 
// vite.config.js
import { defineConfig } from 'vite';
export default defineConfig({
  root: 'public', // 将项目根目录设置为 'public' 文件夹
});

2、define

描述：定义全局常量替换。在开发过程中，这些条目将被定义为全局变量，被定义为全局变量后，意味着不需要通过 import 来导入，直接使用；在构建过程中会被静态替换。

js 复制代码 
export default defineConfig({
  define: {
    __APP_VERSION__: JSON.stringify('v1.0.0'),
    __API_URL__: 'window.__backend_api_url',
  },
})

注意：Vite 使用 esbuild 的 define 进行替换，因此值表达式必须是包含 JSON 可序列化的 值（null、boolean、number、string、array、object）的字符串或单个标识符。对于非字符串值，Vite 会自动将其转换为 JSON 字符串。

3、resolve

resolve 对应的值是一个对象，对象里面对应了好几项配置。

a、alias

用于配置路径别名，这样可以简化模块路径引用。

js 复制代码 
// vite.config.js
import { defineConfig } from 'vite';
import path from 'path';

export default defineConfig({
  resolve: {
    alias: {
      // 将 '@' 指向 'src' 目录
      '@': path.resolve(__dirname, 'src'), 
      // 将 '@components' 指向 'src/components' 目录
      '@components': path.resolve(__dirname, 'src/components'), 
      // 将 '@utils' 指向 'src/utils' 目录
      '@utils': path.resolve(__dirname, 'src/utils'), 
    },
  },
});

之后在代码中就可以通过别名来指定目录：

js 复制代码 
// src/main.js
import { createApp } from 'vue';
import App from './App.vue';
import HelloWorld from '@components/HelloWorld.vue'; // 使用 '@components' alias
import { helperFunction } from '@utils/helpers'; // 使用 '@utils' alias
createApp(App).mount('#app');

4、extensions

在导入时省略文件扩展名时，尝试的文件扩展名列表。

注意，不推荐对自定义导入类型（如 .vue）省略扩展名，因为这可能会干扰 IDE 和类型支持。

默认值为 '.mjs', '.js', '.mts', '.ts', '.jsx', '.tsx', '.json'

可以自定义扩展名的顺序，比如优先匹配 ts 类型：

js 复制代码 
// vite.config.js
import { defineConfig } from 'vite';
export default defineConfig({
  resolve: {
    extensions: ['.ts', '.tsx', '.js', '.jsx', '.json'], // 自定义扩展名顺序
  },
});

5、CSS

CSS 配置项对应的值同样是一个对象，一个基本的格式如下：

js 复制代码 
// vite.config.js
import { defineConfig } from 'vite';
export default defineConfig({
  css: {
    // 其他配置项
  }
});

下面是一个常见的配置项：

postcss：该配置项用于配置 PostCSS 的行为，可以是内联的 PostCSS 配置，也可以是自定义目录。

内联 PostCSS 配置：

js 复制代码 
// vite.config.js
import { defineConfig } from 'vite';
import autoprefixer from 'autoprefixer';
import cssnano from 'cssnano';
export default defineConfig({
  css: {
    postcss: {
      // 在这里配置 postcss 相关信息，例如用哪个插件....
      plugins: [
        autoprefixer(),
        cssnano()
      ]
    }
  }
});

自定义目录：

js 复制代码 
my-project/
├── config/
│   └── postcss.config.js
├── src/
│   └── main.js
└── vite.config.js

这个时候直接指定 postcss 的目录就可以了：

js 复制代码 
// vite.config.js
import { defineConfig } from 'vite';

export default defineConfig({
  css: {
    postcss: 'config' // 指定自定义目录
  }
});

preprocessorOptions：该配置项用于为 CSS 预处理器指定配置，文件扩展名用于作为键来设置选项。每个预处理器支持的选项可以在它们各自的文档中找到：

Sass/Scss 支持的配置选项

Less 支持的配置选项

styl/stylus - 目前仅支持 define，可以作为对象传递。

js 复制代码 
export default defineConfig({
  css: {
    // 配置 css 预处理器
    preprocessorOptions: {
      less: {
        math: 'parens-division',
      },
      styl: {
        // 目前仅支持 define
        define: {
          $specialColor: new stylus.nodes.RGBA(51, 197, 255, 1),
        },
      },
    },
  },
})

preprocessorOptionsextension.additionalData：当你想要为 CSS 预处理器（如 SCSS、SASS、Less 等）添加全局样式、变量、或混合器时，该选项非常有用。

js 复制代码 
import { defineConfig } from 'vite';

export default defineConfig({
  css: {
    preprocessorOptions: {
      scss: {
        // 这里添加了一些全局变量，之后在任何的 Scss 文件中都可以使用这些全局变量
        additionalData: `$injectedColor: orange; $defaultMargin: 10px;`
      }
    }
  }
});
js 复制代码 
import { defineConfig } from 'vite';
export default defineConfig({
  css: {
    preprocessorOptions: {
      scss: {
        // 相当于给所有的 Scss 文件的头部都添加了这个引用，自动导入 mixins.scss 混合器文件
        additionalData: `@import "@/styles/mixins.scss";`
      }
    }
  }
});

preprocessorMaxWorkers：如果启用了这个选项，那么 CSS 预处理器会尽可能在 worker 线程中运行。可以设置 number 值，也可以设置布尔值，例如设置成 true 的话表示 CPU 数量减 1.

devSourcemap：在开发过程中是否启用 source maps，默认值为 false.

js 复制代码 
export default defineConfig({
  css: {
    // 开启 source maps
    devSourcemap: true
  }
});

transformer：指定 CSS 处理的引擎，可以设置的值就两个，'postcss' 或者 'lightningcss'

lightingcss 就是 postcss 的 rust 版本。

服务器配置

开发服务器的功能，开发服务器的端口、代理、CORS...

服务器配置是指开发服务器，对应的配置项是 server

一个基本的格式如下：

js 复制代码 
export default defineConfig({
  server: {
    // 众多配置项
  },
})

下面是一个常见的配置项：

host

指定服务器应该监听哪个 IP 地址，默认是 localhost.

默认： 'localhost'

思考：正常情况下就是 localhost 即可，什么情况下还存在要修改 host 的情况呢？

答案：除了 localhost 以外，我们经常还需要设置为 0.0.0.0 或者 true，表示监听所有的网络接口请求。有些时候需要多设备来测试应用。

port

监听的端口号，默认是 5173.

strictPort

如果设置为 true，Vite 将严格使用指定的端口。如果端口被占用，服务器启动将失败。

proxy

这个配置项非常常用，用于配置代理服务器。

js 复制代码 
export default defineConfig({
  server: {
    proxy: {
      '/foo': 'http://localhost:4567', // 将 '/foo' 前缀的请求代理到 'http://localhost:4567'
    },
  },
});

对应的值也可以是对象的形式，对象形式能够包含更多的配置选项：

js 复制代码 
export default defineConfig({
  server: {
    proxy: {
      '/api': {
        target: 'http://jsonplaceholder.typicode.com',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, ''), // 重写路径，将 '/api' 前缀去掉
      },
    },
  },
});

open

启动开发服务器时是否自动在浏览器中打开应用，默认值是 false.

https

是否启用 HTTPS。如果是一个对象，可以指定 SSL 证书和私钥的路径。

js 复制代码 
export default defineConfig({
  server: {
    https: {
      key: fs.readFileSync('/path/to/server.key'),
      cert: fs.readFileSync('/path/to/server.crt')
    }
  },
});

watch

自定义文件监视器的选项。这对于开发过程中的热模块替换（HMR）非常关键。背后其实使用的是 chokidar，一个 Node.js 的文件系统监听库，它提供了多种可配置的监听选项。

js 复制代码 
import { defineConfig } from 'vite';

export default defineConfig({
  server: {
    watch: {
      // 任何位于 ignored-directory 目录下的文件
      // 或者任何目录下面的 some-specific-file.txt 文件
      // 内容发生更改都不会触发 HMR
      ignored: ['**/ignored-directory/**', '**/some-specific-file.txt']
    }
  }
});

watch 还支持更加细粒度的控制：

js 复制代码 
import { defineConfig } from 'vite';
export default defineConfig({
  server: {
    watch: {
      ignored: '**/temp/**', // 忽略 temp 目录
      persistent: true,      // 持续监听变化
      usePolling: true,      // 使用轮询
      interval: 100,         // 轮询间隔 100 毫秒
      binaryInterval: 300    // 对于二进制文件的轮询间隔
    }
  }
});

如果想要关闭文件监听，直接设置为 null 即可：

js 复制代码 
import { defineConfig } from 'vite';
export default defineConfig({
  server: {
    watch: null
  }
});
构建配置

构建生产版本时候的配置，输出目录、压缩、CSS代码拆分...

预览配置

配置预览服务器的行为，端口、主机名...

依赖优化配置

针对依赖预打包做一些配置，比如可以新增包或者排除包

SSR配置

服务器端渲染相关配置

Worker配置

Web Worker相关配置

相关推荐
剪刀石头布啊8 分钟前
泛洪DFS、BFS
前端
qetfw8 分钟前
Windows Server AD CS：根 CA、Web 证书模板与域内自动注册
前端·windows·windows-server
剪刀石头布啊9 分钟前
为什么React组件很少前缀，而vue的不少组件都有前缀
前端
剪刀石头布啊14 分钟前
gird网格布局
前端
瞬时出道15 分钟前
AI 回答为什么能一个字一个字蹦出来？前端搞懂 SSE 这一篇就够了
vue.js
啃火龙果的兔子16 分钟前
Google Chrome（谷歌浏览器）常用快捷键
前端·chrome
剪刀石头布啊18 分钟前
js真的是单线程实现异步并发么？
前端
剪刀石头布啊23 分钟前
js中改变this指向的操作有哪些
前端
剪刀石头布啊23 分钟前
vue、react 列表中使用 index 作为 key 的话，修改某一个元素后会发生什么
前端
方方洛25 分钟前
glowglow：语言无关的语法高亮器是怎么实现的
前端·前端框架
热门推荐
01国内可直接用、免费额度/永久免费的大模型API清单（含 SiliconFlow、火山、阿里、智谱、百度、Kimi、DeepSeek、DMXAPI 等）02Telegram APK 下载安装完整指南 — 2026年最新03历年考研数学一、数学二、数学三真题试卷及答案PDF04GitHub 镜像站点052026 爱知・名古屋亚运会怎么看？直播平台+赛程安排分享06蜘蛛磁力 搜索引擎大全，如何使用蜘蛛磁力查找磁力链接072026 年 9 月国内外主流大模型横向硬核评测：价格、算力、业务场景全维度对比，GPT‑6 Astra横空出世08给AI一张“业务概念地图“：本体如何从哲学走向企业智能09微信历史版本含下载地址（ Windows PC | 安卓 | MAC ）及设置微信不更新10jev-ultrafast 深度解析：7 秒订机票的浏览器 Agent 是如何炼成的