vite基础知识-1

最新推荐文章于 2025-07-10 23:07:26 发布

原创最新推荐文章于 2025-07-10 23:07:26 发布 · 2.4k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#前端

vite 专栏收录该内容

1 篇文章

订阅专栏

本文介绍了为何选择Vite，以及Vite相较于webpack的优势在于快速启动和浏览器端的开发体验。通过实例展示了Vite的安装、配置、环境变量处理，并探讨了预构建依赖、环境配置的区别，以及如何处理客户端环境变量。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

为什么选择vite？

讲vite之前，我们先来了解一下webpack的原理。
webpack支持多种模块化（浏览器端和服务端都可以运行）。比如：

// index.js
const lodash = require("lodash"); // commonjs规范
import React from 'react'; // es6 module

webpack将上述代码编译：(编译后才能在浏览器运行)
webpack的编译原理：构建AST，抽象语法分析上述js文件有哪些导入和导出的操作，但是这个过程是运行在服务端的。

(function(modules){
	function webpack_require() {
		// 入口是index.js
		modules[entry](webpack_require);
	}
}, ({
	"./src/index.js": (webpack_require) => {
		const lodash webpack_require("lodash");
		const Vue = webpack_require("vue");
	}
}))

因为webpack支持这种多模块的形式，所以必须统一模块化代码。因此构建项目之前它会把所有的依赖都读取一便进行转换，导致项目启动时非常耗时。
在这里插入图片描述

vite: 基于es module，所以启动项目时不需要把所有的代码都读取一遍。
在这里插入图片描述

侧重点：
webpack：兼容性
vite：浏览器端的开发体验
vite官方文档

vite初体验

npm init -y
npm i lodash

创建文件：
index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="./main.js" type="module"></script>
  </head>
  <body></body>
</html>

main.js

import { x } from "./counter.js";
console.log(x);

counter.js

import _ from "loadash";
const x = 1;

export { x };

在这里插入图片描述

在默认情况下，es module导入资源时，要么是绝对路径，要么是相对路径。
对于

import _ from "lodash";

最佳方式应该是从node_modules导入，为什么es官方在我们使用非绝对路径或相对路径导入时，不默认帮我们直接从node_modules下导入呢？

假设es官方帮我们做了这件事情
浏览器帮我们导入了lodash，如果lodash里面又有import导入语句，那么浏览器又会继续加载其他js文件(通过网络请求)，性能会很差。类似下图:
在这里插入图片描述
commonJS是运行在服务端的，所以跟es module不太一样，它直接读取node_modules下的包。

npm i vite -D

修改package.json

{
  "name": "vitePractice",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "dev": "vite",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "loadash": "^1.0.0"
  },
  "devDependencies": {
    "vite": "^3.1.8"
  }
}

counter.js

import _ from "lodash";
const x = 1;
console.log(_);
export { x };

运行代码

npm run dev

在这里插入图片描述
lodash没有报错了，vite帮我们解决了上述问题。
那么vite是怎么解决这个问题的呢？

import _ from "lodash";
// 对于上述语句，vite在处理时发现并没有相对路径或者绝对路径的引用，它会尝试去补全路径
// 结果：
import _ from "/node_modules/.vite/lodash"

在这里插入图片描述
原理：
依赖预构建：
首先vite会找到对应的依赖，然后调用esbuild(对js语法进行处理的一个库)，将其他规范的代码转换成esmodule规范，然后放到当前目录下的node_modules/.vite/deps，同时对esmodule规范的各个模块进行统一集成。
解决的问题：

不同的第三方包会有不同的导入格式
对路径的处理上可以直接使用.vite/deps，方便路径重写
网络多包传输的性能问题

vite 开发/生产模式配置

不同环境的配置是不一样的

vite.dev.config.js 开发环境
vite.prod.config.js 生产环境
vite.base.config.js 共有环境
vite.config.js vite运行调用的环境

package.json:

{
  "name": "vitePractice",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "loadash": "^1.0.0"
  },
  "devDependencies": {
    "vite": "^3.1.8"
  }
}

vite.config.js:

import { defineConfig } from "vite";
import viteBaseConfig from "./vite.base.config";
import viteDevConfig from "./vite.dev.config";
import viteProdConfig from "./vite.prod.config";

const envResolve = {
  build: () => ({ ...viteBaseConfig, ...viteProdConfig }),
  serve: () => ({ ...viteBaseConfig, ...viteDevConfig }),
};

export default defineConfig(({ command }) => {
  console.log(command);
  return envResolve[command]();
});

vite.base.config.js:

// 共有的环境配置
import { defineConfig } from "vite";

export default defineConfig({
  optimizeDeps: {
    exclude: [],
  },
});

vite.dev.config.js:

// 开发环境配置
import { defineConfig } from "vite";

export default defineConfig({});

vite.prod.config.js:

// 生产环境配置
import { defineConfig } from "vite";

export default defineConfig({});

在这里插入图片描述

vite 环境变量

vite内置了dotenv这个第三方库
dotenv会自动读取.env文件, 并解析这个文件中的对应环境变量并将其注入到process对象下(但是vite考虑到和其他配置的一些冲突问题, 他不会直接注入到process对象下)

涉及到vite.config.js中的一些配置:

root
envDir: 用来配置当前环境变量的文件地址

vite给我们提供了一些补偿措施:我们可以调用vite的loadEnv来手动确认env文件

process.cwd方法: 返回当前node进程的工作目录

.env: 所有环境都需要用到的环境变量 .env.development: 开发环境需要用到的环境变量(默认情况下vite将我们的开发环境取名为development)
.env.production: 生产环境需要用到的环境变量(默认情况下vite将我们的生产环境取名为production)

yarn dev --mode development 会将mode设置为development传递进来

当我们调用loadenv的时候, 他会做如下几件事:

直接找到.env文件不解释并解析其中的环境变量并放进一个对象里
会将传进来的mode这个变量的值进行拼接: .env.development, 并根据我们提供的目录去取对应的配置文件并进行解析, 并放进一个对象
我们可以理解为
const baseEnvConfig = 读取.env的配置
const modeEnvConfig = 读取env相关配置
const lastEnvConfig = { …baseEnvConfig, …modeEnvConfig }

如果是客户端, vite会将对应的环境变量注入到import.meta.env里去。vite做了一个拦截, 他为了防止我们将隐私性的变量直接送进import.meta.env中, 所以他做了一层拦截, 如果你的环境变量不是以VITE开头的, 他就不会帮你注入到客户端中去, 如果我们想要更改这个前缀, 可以去使用envPrefix配置。

补充一个小知识: 为什么vite.config.js可以书写成esmodule的形式, 这是因为vite他在读取这个vite.config.js的时候会率先node去解析文件语法, 如果发现你是esmodule规范会直接将你的esmodule规范进行替换变成commonjs规范

修改文件

package.json:

{
  "name": "vitePractice",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "dev": "vite --mode development",
    "build": "vite build --mode production",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "loadash": "^1.0.0"
  },
  "devDependencies": {
    "vite": "^3.1.8"
  }
}

vite.config.js

import { defineConfig, loadEnv } from "vite";
import viteBaseConfig from "./vite.base.config";
import viteDevConfig from "./vite.dev.config";
import viteProdConfig from "./vite.prod.config";

const envResolve = {
  build: () => ({ ...viteBaseConfig, ...viteProdConfig }),
  serve: () => ({ ...viteBaseConfig, ...viteDevConfig }),
};
/*
@params:
command: buidl | serve 环境
mode: 命令行传进来的值。比如： yarn run dev --mode development 
*/
export default defineConfig(({ command, mode }) => {
  const env = loadEnv(mode, process.cwd(), "");
  console.log(env);
  return envResolve[command]();
});