vite的基本配置，你还有哪些不知道！

最新推荐文章于 2025-04-23 20:00:00 发布

前端黑马小扬

最新推荐文章于 2025-04-23 20:00:00 发布

阅读量321

点赞数

分类专栏：前端web 文章标签：前端 vue.js 开发语言

本文链接：https://blog.youkuaiyun.com/weixin_51338875/article/details/133779986

版权

前端web 专栏收录该内容

4 篇文章

订阅专栏

一、vite的优势

下面列举了几个Vite的优势：

快速的冷启动时间：Vite的冷启动时间极短，可以在几百毫秒内完成。这是因为Vite采用了现代的ES模块解析技术，可以在浏览器中直接解析模块，无需进行打包和编译。
高效的热更新机制：Vite支持快速的热更新，只会更新已更改的文件，而不需要重新构建整个应用程序。这大大提高了开发效率。
简单的配置：相比于其他构建工具，Vite的配置非常简单易懂。开发者只需要通过简单的配置文件即可轻松地定制和控制项目的构建过程。
支持多种开发框架：Vite适用于多种前端框架，包括Vue、React、Angular等。它提供了专门的插件和工具，使得这些框架能够与Vite高度融合。
模块化开发：Vite提供了原生的ES模块支持，以及对CSS和静态资源的本地化处理。这使得开发者可以更容易地管理模块化的项目结构。

二、vite的打包原理

Vite 的打包原理可以概括为以下几个步骤：

解析入口文件：Vite 会解析指定入口文件（默认为 src/index.html）中的 <script> 和 <link> 标签，获取项目所需的所有文件。
构建依赖图：根据解析出来的文件，Vite 会构建一个依赖图，记录每个文件依赖于哪些其他文件。这些依赖关系包括：ES6 模块导入、CommonJS 模块导入、AMD 模块导入、CSS 中的 @import、HTML 中的资源引用等。
在服务器中运行代码：利用浏览器原生支持 ES 模块的特性，在服务器端直接执行 JavaScript 代码，将模块导入转化为请求处理。Vite 将服务器部分的 JS 代码和每个请求都放在一个事件循环中进行处理。
缓存文件内容：Vite 会将解析过的文件缓存在内存中，以便下次请求时快速响应，并在文件内容发生变化时自动更新缓存。
实时编译和响应：当浏览器请求某个文件时，Vite 会根据该文件的类型（JS、CSS、HTML 等）选择不同的编译器对文件进行实时编译，并返回给浏览器。
HMR（Hot Module Replacement）：Vite 还支持 HMR 技术，即模块热替换，可以在不刷新页面的情况下更新模块内容。

综上所述，Vite 的打包原理是通过构建依赖图、在服务器中运行代码、缓存文件内容、实时编译和响应、以及支持 HMR 技术来实现的。

三、vite的基本配置

// vite.config.js

export default {
  // 入口文件的路径
  input: 'src/main.js',
  // 指定项目的根目录
  root: './',
  // 指定输出目录
  outDir: 'dist',
  // 输出文件的路径和名称
  output: {
    file: 'dist/bundle.js'
  },
  // 是否生成 source map
  sourcemap: true,
  // 是否开启 SSR
  ssr: false,
  // 静态资源的路径
  base: '/public/',
  // 编译模式
  mode: 'development',
  // 调试相关配置
  server: {
    // 设置服务器开启的端口号
    port: 3000,
    // 是否自动打开浏览器
    open: true,
    // 是否开启 https
    https: false,
    // 是否开启 hmr 热更新
    hmr: true,
    // 是否在控制台显示警告信息
    progress: true,
    // 服务器代理配置
    proxy: {
      '/api': 'http://localhost:3000'
    }
    // 是否开启服务器响应 gzip 压缩
    gzip: true,
    // 其他服务器选项，例如 proxy、cors 等
    // 详见 https://cn.vitejs.dev/config/#server-options
   },
  // 解析模块的路径
  resolve: {
    // 别名配置
    alias: {
      '@': '/src'
    }
  },
  // CSS的相关配置
  css: {
    // 是否将CSS提取成一个单独的文件
    extract: true,
    // CSS预处理器配置
    preprocessorOptions: {
      scss: {
        additionalData: '@import "./src/styles/variables.scss";'
      }
    }
  },
  // 构建相关配置
  build: {
    // 是否开启sourcemap
    sourcemap: true,
    // 是否压缩代码
    minify: true,
    // 是否生成manifest.json文件
    manifest: true,
    // 是否将CSS提取成一个单独的文件
    cssCodeSplit: true
  }
  // 其他配置项
  // 详见 https://cn.vitejs.dev/config/
}