Vite是一个快速的前端开发和构建工具，它可以大大提高Web应用程序的开发速度。Vite的主要特点是快速的启动时间和快速的热更新，这使得开发人员可以更快地测试和调试他们的代码，它的目标是提供一种简单、轻量级的开发环境，能够快速启动项目并实时预览。

Vite采用了一种新的开发模式，利用现代浏览器的原生ES模块支持，将开发过程中的构建步骤推迟到了运行时。在这篇博客中，我将深入了解Vite内容，包括它的特点、组成、安装和使用、热更新、环境变量、插件的安装与配置、开发服务器的启动、以及如何使用它来加速我们的开发流程，最后就是它的其他一些功能（缓存、ts、css、静态资源处理等）。

Vite概述

Vite是新一代前端开发与构建工具，能够显著提升前端开发体验。Vite意在提供开箱即用的配置，同时它的插件API和JavaScript API带来了高度的可扩展性，并有完整的类型支持。由于其原生ES模块导入方式，可以实现非常快的冷服务器启动。

Vite是vue的作者尤雨溪在开发vue3.0的时候开发的一个基于原生ES-Module的前端构建工具。其本人在后来对vue3的宣传中对自己的新作品Vite赞不绝口，并表示自己”再也回不去webpack了“。

Vite的构建

Vite提供了一套原生ESM的HMR API。 具有HMR功能的框架可以利用该API提供即时、准确的更新，而无需重新加载页面或清除应用程序状态。Vite内置了HMR到Vue.js单文件组件（SFC）和React Fast Refresh中。

Vite的组成

一个开发服务器，它基于原生ES模块，提供了丰富的内建功能，速度快，支持模块热更新（HMR）。

一套构建指令，它使用rollup打包代码，并且它是预配置的，开箱即用，可输出用于生产环境的高度优化过的静态资源。同时也提供了丰富的插件api，带来了高度的可扩展性。可以用于构建vue，react等项目。

为什么选择 Vite

Vite在开发过程中的一个主要优势是快速启动时间。传统的前端开发工具（如webpack）在启动项目时需要进行大量的构建工作，包括解析模块、编译代码、打包资源等。而Vite利用了浏览器对原生ES模块的支持，可以直接在浏览器中运行源码，避免了繁琐的构建过程，从而实现了秒级启动时间。

另外，Vite还支持热模块替换（HMR），这意味着在开发过程中修改代码后，页面会立即更新，无需手动刷新。这极大地提高了开发效率，让开发者能够更快地看到修改的结果。

Vite的安装和使用

要使用Vite，首先需要确保你的开发环境中已经安装了Node.js（建议使用最新版本）。然后，你可以使用以下命令全局安装Vite，我们可以使用npm或yarn来安装它。在命令行中输入以下命令：

npm install -g create-vite

安装完成后，你可以在命令行中使用`create-vite`命令来创建一个新的Vite项目：

创建项目

create-vite my-project

或者默认不填则会为我们创建一个名为vite-project的项目，根据自己情况选择一个框架，这里我选择的是Vue

这将在当前目录下创建一个名为`vite-project`的新项目。目录结构如下

接下来，根据命令行上的提示，进入项目目录并安装依赖，执行如下命令：

cd vite-project

npm install

使用npm构建vite的项目

当然了，你也可以通过安装vite结合npm来构建一个vite的项目，步骤和指令如下：

npm install -g vite

或

yarn global add vite

创建一个新的Vite项目。我们可以使用以下命令来创建一个新项目：

npm init vite-app my-project

或者

yarn create vite-app my-project

这将创建一个新的名为“my-project”的项目，并在其中安装所有必要的依赖项。在安装完成后，我们可以进入该项目并启动开发服务器。跟上面步骤类似。

启动开发服务器

安装完成后，要启动开发服务器，我们可以使用以下命令启动项目：

cd vite-project

npm run dev

或者

cd vite-project

yarn dev

这将启动开发服务器，并在浏览器中打开一个新的窗口，显示我们的应用程序。

这将启动一个开发服务器，并在浏览器中打开项目的预览页面。你可以在浏览器中实时预览和调试项目，同时在代码中进行修改后，页面会立即更新。

使用Vite的热更新

一旦我们启动了开发服务器，我们就可以开始使用Vite的热更新功能来加速我们的开发流程。这意味着我们可以在不刷新整个页面的情况下，立即看到我们所做的更改。

例如，我们可以在我们的代码中添加一些文本，并在保存后立即看到更改。

  
    
My Name is SteveRocket    
Welcome to my CTO Plus      

在保存后，我们可以立即看到新的文本，这个过程根本不需要重启服务，浏览器直接所见即所得。

构建和部署

在开发完成后，你可以使用以下命令构建项目：

npm run build

这将生成一个优化过的生产版本，包括压缩代码、提取公共模块、生成文件指纹等。构建完成后，你可以将生成的文件部署到生产环境中。

默认情况下，Vite生成的构建文件是静态的，你可以将其部署到任何静态文件服务器上。如果你使用的是现代浏览器，你还可以使用Vite提供的预渲染功能，将页面预渲染为静态HTML文件，以提供更好的性能和SEO。

Vite的环境变量

接下来，我们来看下Vite一个重要的功能：环境变量，它允许开发者根据不同的环境配置应用程序的行为。

Vite的环境变量可以通过两种方式进行配置：命令行参数和`.env`文件。

首先，我们来看一下命令行参数。在启动Vite开发服务器时，可以使用`--env`参数来传递环境变量。例如，`vite --env.NODE_ENV=production`会将`NODE_ENV`设置为`production`。在应用程序中，可以使用`import.meta.env`来访问这些环境变量。例如，`import.meta.env.NODE_ENV`会返回`production`。

除了命令行参数，还可以使用`.env`文件来配置环境变量。`.env`文件是一个纯文本文件，每一行都是一个`key=value`的键值对。例如，`.env`文件中可以有以下内容：

VITE_API_URL=

VITE_API_KEY=1234567890

在应用程序中，可以使用`import.meta.env.VITE_API_URL`和`import.meta.env.VITE_API_KEY`来访问这些环境变量。

需要注意的是，`.env`文件只能在开发模式下使用。在生产模式下，需要将环境变量配置在服务器上，例如使用Nginx或Apache等服务器软件。

此外，Vite还支持使用`.env.development`、`.env.production`和`.env.local`等特定环境的配置文件。例如，`.env.development`文件中的配置只会在开发模式下生效，`.env.production`文件中的配置只会在生产模式下生效，而`.env.local`文件中的配置会覆盖其他配置文件中的相同配置。

import.meta.env

Vite在一个特殊的import.meta.env对象上暴露环境变量。这里有一些在所有情况下都可以使用的内建变量：

.env文件

如果改变了env文件的代码，需要重启服务后才会生效

Vite使用dotenv从你的环境目录中的下列文件加载额外的环境变量：

.env#所有情况下都会加载

.env.local#所有情况下都会加载，但会被git忽略

.env.[mode]#只在指定模式下加载

.env.[mode].local#只在指定模式下加载，但会被git忽略

环境加载优先级

一份用于指定模式的文件（例如.env.production）会比通用形式的优先级更高（例如.env）。

另外，Vite执行时已经存在的环境变量有最高的优先级，不会被.env类文件覆盖。例如当运行VITE_SOME_KEY=123 vite build的时候。

.env类文件会在Vite启动一开始时被加载，而改动会在重启服务器后生效。

加载的环境变量也会通过import.meta.env以字符串形式暴露给客户端源码。

为了防止意外地将一些环境变量泄漏到客户端，只有以VITE_为前缀的变量才会暴露给经过vite处理的代码。例如下面这些环境变量：

VITE_SOME_KEY=123

DB_PASSWORD=foobar

只有VITE_SOME_KEY会被暴露为import.meta.env.VITE_SOME_KEY提供给客户端源码，而DB_PASSWORD则不会。

js

console.log(import.meta.env.VITE_SOME_KEY) // 123

console.log(import.meta.env.DB_PASSWORD) // undefined

此外，Vite使用dotenv-expand来直接拓展变量。想要了解更多相关语法，请查看它们的文档。

请注意，如果想要在环境变量中使用$符号，则必须使用对其进行转义。

KEY=123

NEW_KEY1=test$foo   # test

NEW_KEY2=test$foo  # test$foo

NEW_KEY3=test$KEY   # test123

如果你想自定义env变量的前缀，请参阅envPrefix。

安全注意事项

TypeScript的智能提示

默认情况下，Vite在vite/client.d.ts中为import.meta.env提供了类型定义。随着在.env[mode]文件中自定义了越来越多的环境变量，你可能想要在代码中获取这些以VITE_为前缀的用户自定义环境变量的TypeScript智能提示。

要想做到这一点，你可以在src目录下创建一个env.d.ts文件，接着按下面这样增加ImportMetaEnv的定义：

typescript

/// 

interface ImportMetaEnv {

  readonly VITE_APP_TITLE: string

  // 更多环境变量...

}

interface ImportMeta {

  readonly env: ImportMetaEnv

}

如果你的代码依赖于浏览器环境的类型，比如DOM和WebWorker，你可以在tsconfig.json中修改lib字段来获取类型支持。

json

{

  "lib": ["WebWorker"]

}

HTML环境变量替换

Vite还支持在HTML文件中替换环境变量。import.meta.env中的任何属性都可以通过特殊的%ENV_NAME%语法在HTML文件中使用：

html

Vite is running in %MODE%

Using data from %VITE_API_URL%

如果环境变量在import.meta.env中不存在，比如不存在的%NON_EXISTENT%，则会将被忽略而不被替换，这与JS中的import.meta.env.NON_EXISTENT不同，JS中会被替换为undefined。

模式

默认情况下，开发服务器(dev命令)运行在development (开发)模式，而build命令则运行在production (生产)模式。

这意味着当执行vite build时，它会自动加载.env.production中可能存在的环境变量：

# .env.production

VITE_APP_TITLE=My App

在你的应用中，你可以使用import.meta.env.VITE_APP_TITLE渲染标题。

在某些情况下，若想在vite build时运行不同的模式来渲染不同的标题，你可以通过传递--mode选项标志来覆盖命令使用的默认模式。

例如，如果你想在staging（预发布）模式下构建应用：

bash

vitebuild--modestaging

还需要新建一个.env.staging文件：

# .env.staging

VITE_APP_TITLE=My App (staging)

由于vite build默认运行生产模式构建，你也可以通过使用不同的模式和对应的.env文件配置来改变它，用以运行开发模式的构建：

# .env.testing

NODE_ENV=development

Vite的配置

Vite的默认配置已经足够满足大多数项目的需求，但如果你需要进行一些自定义配置，你可以在项目根目录下创建一个`vite.config.js`文件，并导出一个配置对象（我构建的项目默认就生成了该文件）。例如，你可以指定项目的入口文件、输出目录、代理设置等。你还可以通过配置插件来扩展Vite的功能，例如添加TypeScript支持、CSS预处理器等。

以下是一个简单的`vite.config.js`配置示例：

module.exports = {  // 入口文件  root: './src/main.js',  // 输出目录  build: {    outDir: './dist',  },  // 代理设置  server: {    proxy: {      '/api': 'http://localhost:3000',    },  },};

Vite的插件安装与配置

Vite还提供了许多有用的插件，可以帮助我们进一步加速我们的开发流程。例如，我们可以使用Vite的插件来自动格式化我们的代码、自动补全我们的代码、自动检测我们的代码中的错误等等。

要使用Vite的插件，我们可以在我们的项目中安装它们，并在我们的配置文件中配置它们。例如，要安装Vite的自动格式化插件，我们可以使用以下命令：

npm install vite-plugin-prettier

或者

yarn add vite-plugin-prettier

然后，我们可以在我们的Vite配置文件中配置该插件：

import { defineConfig } from 'vite';import vue from '@vitejs/plugin-vue';import prettier from 'vite-plugin-prettier';
export default defineConfig({  plugins: [    vue(),    prettier({      // options    }),  ],});

Vite其他功能介绍npm依赖解析和构建

原生ES导入不支持下面这样的裸模块导入：

js

import { someMethod } from 'my-dep'

上面的代码会在浏览器中抛出一个错误。Vite将会检测到所有被加载的源文件中的此类裸模块导入，并执行以下操作:

1.预构建它们可以提高页面加载速度，并将CommonJS / UMD转换为ESM格式。预构建这一步由esbuild执行，这使得Vite的冷启动时间比任何基于JavaScript的打包器都要快得多。

2.重写导入为合法的URL，例如/node_modules/.vite/deps/my-dep.js?v=f3sf2ebd以便浏览器能够正确导入它们。

依赖是强缓存的