概述

Vite是前端构建工具。vite

相较于webpack,vite采用了不同的运行方式：

• 开发时，并不对代码打包，而是直接采用ESM的方式来运行项目
• 在项目打包部署时，使用 rollup 对项目进行打包
• 除了速度外，vite使用起来也更加方便

  默认项目源码目录就是根目录，而不像 webpack 那样是 src 目录。

  我们可以初始化一个工程：

  npm init 
  npm i vite -D
  

  

  
    
    
    Document
    
  
  
    
  Vite demo
  
  
  

  document.body.insertAdjacentHTML('beforeend', '
  Hello Vite!
  ')
  

  然后执行 ：

  npx vite 
  

  启动项目，并且自动支持热更新和启动服务器。

  

  npx vite build进行项目打包，且使用 的是 ESM。但是 ESM 必须通过 url的方式进行加载，也就是说，使用打包后的 html 不能运行项目，必须使用 http / https 才可以，所以需要通过服务器打开项目。

  但是 live server 也不可以，live server 的根目录配置有问题，默认配置的根目录是项目目录，我们还需要改为 dist 目录。

  所以要么通过将 dist 放在服务器运行，要么 执行 npx vite preview 运行。

  vite是开发服务器，并不对项目进行打包；而vite preview是打包后的预览服务器。

  

  配置

  一般的 style，css(sass, less 等)，图片处理 等一系列常用配置 vite 已经内置了，无需我们手动配置。

  要想为传统浏览器提供支持（es6 -> es5），可以按下面这样使用官方插件 @vitejs/plugin-legacy：

  $ npm add -D @vitejs/plugin-legacy
  

  // vite.config.js
  import legacy from '@vitejs/plugin-legacy'
  import { defineConfig } from 'vite'
  export default defineConfig({
    plugins: [
      legacy({
        targets: ['defaults', 'not IE 11'],
      }),
    ],
  })
  

  legacy 在打包时需要插件 terser（用于压缩代码），所以还需要装：

  npm i terser -D