58.1k stars前端开发技术栈（工具篇）：2023深入了解快速开发工具vite的安装和使用（详细）

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

更多的Vue开发技术讲解，请关注公众号CTO Plus后续的文章。

Vite概述

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

大前端专栏：https://blog.csdn.net/zhouruifu2015/category_5734911

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的热更新功能来加速我们的开发流程。这意味着我们可以在不刷新整个页面的情况下，立即看到我们所做的更改。

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

<template>  <div>    <h1>My Name is SteveRocket</h1>    <p>Welcome to my <b>CTO Plus</b></p>    <img src="../assets/wechat.png"/>  </div></template>

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

构建和部署

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

npm run build

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

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

更多关于Vue前端相关技术点，敬请关注公众号：CTO Plus后续的发文，有问题欢迎后台留言交流。

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= https://mp.weixin.qq.com/s/sw-pK1SHnqhlUd81jwEKLA

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对象上暴露环境变量。这里有一些在所有情况下都可以使用的内建变量：

import.meta.env.MODE: {string} 应用运行的模式。
import.meta.env.BASE_URL: {string} 部署应用时的基本URL。他由base 配置项决定。
import.meta.env.PROD: {boolean} 应用是否运行在生产环境。
import.meta.env.DEV: {boolean} 应用是否运行在开发环境 (永远与import.meta.env.PROD相反)。
import.meta.env.SSR: {boolean} 应用是否运行在 server上。

.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则不会。

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。

安全注意事项

.env.*.local 文件应是本地的，可以包含敏感变量。你应该将 .local 添加到你的.gitignore 中，以避免它们被 git 检入。
由于任何暴露给 Vite 源码的变量最终都将出现在客户端包中，VITE_* 变量应该不包含任何敏感信息。

TypeScript的智能提示

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

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

typescript

/// <reference types="vite/client" />

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

<h1>Vite is running in %MODE%</h1>

<p>Using data from %VITE_API_URL%</p>

如果环境变量在 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

vite build --mode staging

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

# .env.staging

VITE_APP_TITLE=My App (staging)

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

# .env.testing

NODE_ENV=development

更多关于Vue前端相关技术点，敬请关注公众号：CTO Plus后续的发文，有问题欢迎后台留言交流。

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 导入不支持下面这样的裸模块导入：

import {
   
    someMethod } from 'my-dep'

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

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

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

依赖是强缓存的

Vite 通过 HTTP 头来缓存请求得到的依赖，所以如果你想要编辑或调试一个依赖，请按照这里的步骤操作。

依赖预构建

当你首次启动 vite 时，Vite 在本地加载你的站点之前预构建了项目依赖。默认情况下，它是自动且透明地完成的。

这就是 Vite 执行时所做的“依赖预构建”。这个过程有两个目的:

CommonJS 和 UMD 兼容性: 在开发阶段中，Vite 的开发服务器将所有代码视为原生 ES 模块。因此，Vite 必须先将以CommonJS 或 UMD 形式提供的依赖项转换为 ES 模块。

在转换 CommonJS 依赖项时，Vite会进行智能导入分析，这样即使模块的导出是动态分配的（例如 React），具名导入（named imports）也能正常工作：

//符合预期

import React, { useState } from 'react'

性能：为了提高后续页面的加载性能，Vite将那些具有许多内部模块的 ESM 依赖项转换为单个模块。

有些包将它们的 ES 模块构建为许多单独的文件，彼此导入。例如，lodash-es 有超过 600 个内置模块！当我们执行import { debounce } from 'lodash-es' 时，浏览器同时发出 600 多个 HTTP 请求！即使服务器能够轻松处理它们，但大量请求会导致浏览器端的网络拥塞，使页面加载变得明显缓慢。

通过将 lodash-es 预构建成单个模块，现在我们只需要一个HTTP请求！

注意

依赖预构建仅适用于开发模式，并使用 esbuild 将依赖项转换为 ES 模块。在生产构建中，将使用 @rollup/plugin-commonjs。

文件系统缓存

Vite 将预构建的依赖项缓存到 node_modules/.vite中。它会基于以下几个来源来决定是否需要重新运行预构建步骤：

包管理器的锁文件内容，例如 package-lock.json，yarn.lock，pnpm-lock.yaml，或者 bun.lockb；
补丁文件夹的修改时间；
vite.config.js中的相关字段；
NODE_ENV 的值。

只有在上述其中一项发生更改时，才需要重新运行预构建。

如果出于某些原因你想要强制 Vite 重新构建依赖项，你可以在启动开发服务器时指定--force 选项，或手动删除 node_modules/.vite 缓存目录。

浏览器缓存

已预构建的依赖请求使用 HTTP 头 max-age=31536000, immutable 进行强缓存，以提高开发期间页面重新加载的性能。一旦被缓存，这些请求将永远不会再次访问开发服务器。如果安装了不同版本的依赖项（这反映在包管理器的 lockfile 中），则会通过附加版本查询自动失效。如果你想通过本地编辑来调试依赖项，您可以：

通过浏览器开发工具的 Network 选项卡暂时禁用缓存；
重启 Vite 开发服务器指定 --force 选项，来重新构建依赖项;
重新载入页面。

TypeScript

Vite 天然支持引入 .ts 文件。

请注意，Vite 仅执行 .ts 文件的转译工作，并不执行任何类型检查。并假定类型检查已经被你的 IDE 或构建过程处理了。那怎么开启类型检查呢？

Vite 之所以不把类型检查作为转换过程的一部分，是因为这两项工作在本质上是不同的。转译可以在每个文件的基础上进行，与 Vite 的按需编译模式完全吻合。相比之下，类型检查需要了解整个模块图。把类型检查塞进Vite 的转换管道，将不可避免地损害 Vite 的速度优势。

Vite 的工作是尽可能快地将源模块转化为可以在浏览器中运行的形式。为此，我们建议将静态分析检查与 Vite 的转换管道分开。这一原则也适用于其他静态分析检查，例如 ESLint。

在构建生产版本时，你可以在 Vite 的构建命令之外运行tsc --noEmit。
在开发时，如果你需要更多的 IDE 提示，我们建议在一个单独的进程中运行tsc --noEmit --watch，或者如果你喜欢在浏览器中直接看到上报的类型错误，可以使用vite-plugin-checker。

更多关于Vue前端相关技术点，敬请关注公众号：CTO Plus后续的发文，有问题欢迎后台留言交流。

Vite 使用 esbuild 将 TypeScript 转译到 JavaScript，约是 tsc 速度的 20~30 倍，同时 HMR 更新反映到浏览器的时间小于 50ms。

使用仅含类型的导入和导出形式的语法可以避免潜在的 “仅含类型的导入被不正确打包” 的问题，写法示例如下：

import type {
   
    T } from 'only/types'

export type {
   
    T }

客户端类型

Vite 默认的类型定义是写给它的Node.js API 的。要将其补充到一个 Vite 应用的客户端代码环境中，请添加一个 d.ts 声明文件：

/// <reference types="vite/client" />

或者，你也可以将 vite/client 添加到 tsconfig.json 中的 compilerOptions.types 下：

{
   
     "compilerOptions": {
   
       "types": ["vite/client"]  }}

这将会提供以下类型定义补充：

资源导入 (例如：导入一个 .svg 文件)
import.meta.env 上 Vite 注入的环境变量的类型定义
import.meta.hot 上的 HMR API 类型定义

TIP

要覆盖默认的类型定义，请添加一个包含你所定义类型的文件，请在三斜线注释reference vite/client 前添加定义。

例如，要为 React 组件中的 *.svg文件定义类型：

vite-env-override.d.ts (the file that contains your typings):

· ts

declare module '*.svg' {

  const content: React.FC<React.SVGProps<SVGElement>>

  export default content

}

· The file containing the reference to vite/client:

/// <reference types="./vite-env-override.d.ts" />

/// <reference types="vite/client" />

CSS

导入 .css 文件将会把内容插入到<style> 标签中，同时也带有 HMR 支持。也能够以字符串的形式检索处理后的、作为其模块默认导出的 CSS。

路径导入支持使用@import，eg： @import './base.css';
支持CSS Modules用法可以参考

任何以 .module.css 为后缀名的 CSS 文件都被认为是一个 CSS modules 文件。导入这样的文件会返回一个相应的模块对象：

/* example.module.css */

.red {

color: red;

}

import classes from './example.module.css'

document.getElementById('foo').className = classes.red

CSS modules 行为可以通过 css.modules选项进行配置。

如果 css.modules.localsConvention 设置开启了 camelCase 格式变量名转换（例如 localsConvention: 'camelCaseOnly'），你还可以使用按名导入。

// .apply-color -> applyColor

import { applyColor } from './example.module.css'

document.getElementById('foo').className = applyColor

支持css预处理器

由于 Vite 的目标仅为现代浏览器，因此建议使用原生 CSS 变量和实现 CSSWG 草案的PostCSS 插件（例如 postcss-nesting）来编写简单的、符合未来标准的 CSS。话虽如此，但 Vite 也同时提供了对 .scss, .sass, .less, .styl 和 .stylus 文件的内置支持。没有必要为它们安装特定的 Vite插件，但必须安装相应的预处理器依赖：

# .scss and .sass

npm add -D sass

# .less

npm add -D less

# .styl and .stylus

npm add -D stylus

另外，vite.config.ts中需要增加如下配置：

  css: {
   
         // css预处理器      preprocessorOptions: {
   
           scss: {
   
             additionalData: '@import "@/assets/style/mixin.scss";@import "@/assets/style/variable.scss";' //引入全局scss样式        }      }    }

你还可以通过在文件扩展名前加上 .module 来结合使用 CSS modules 和预处理器，例如 style.module.scss。（react项目中这样用过）

禁用 CSS 注入页面

自动注入 CSS 内容的行为可以通过 ?inline参数来关闭。在关闭时，被处理过的 CSS 字符串将会作为该模块的默认导出，但样式并没有被注入到页面中。

import './foo.css' // 样式将会注入页面

import otherStyles from './bar.css?inline' //样式不会注入页面

注意

自 Vite 4 起，CSS 文件的默认导入和按名导入（例如import style from './foo.css'）将弃用。请使用 ?inline参数代替。

静态资源处理

引入静态资源的方式

import imgUrl from './img.png'

document.getElementById('hero-img').src = imgUrl

例如，imgUrl 在开发时会是 /img.png，在生产构建后会是 /assets/img.2d8efhg.png。

行为类似于 Webpack 的file-loader。区别在于导入既可以使用绝对公共路径（基于开发期间的项目根路径），也可以使用相对路径。

url() 在 CSS 中的引用也以同样的方式处理。
如果 Vite 使用了 Vue 插件，Vue SFC 模板中的资源引用都将自动转换为导入。
常见的图像、媒体和字体文件类型被自动检测为资源。你可以使用 assetsInclude 选项扩展内部列表。
引用的资源作为构建资源图的一部分包括在内，将生成散列文件名，并可以由插件进行处理以进行优化。
较小的资源体积小于 assetsInlineLimit 选项值则会被内联为 base64 data URL。
默认情况下，TypeScript 不会将静态资源导入视为有效的模块。要解决这个问题，需要添加 vite/client。(使用vue脚手架初始化项目，这些都会帮你配好的）
Git LFS 占位符会自动排除在内联之外，因为它们不包含它们所表示的文件的内容。要获得内联，请确保在构建之前通过 Git LFS 下载文件内容。
public目录

如果你有下列这些资源：

不会被源码引用（例如 robots.txt）
必须保持原有文件名（没有经过 hash）
...或者你压根不想引入该资源，只是想得到其 URL。

那么你可以将该资源放在指定的 public 目录中，它应位于你的项目根目录。该目录中的资源在开发时能直接通过/ 根路径访问到，并且打包时会被完整复制到目标目录的根目录下。

目录默认是 <root>/public，但可以通过 publicDir 选项来配置。

请注意：

引入 public 中的资源永远应该使用根绝对路径 —— 举个例子，public/icon.png 应该在源码中被引用为 /icon.png。
public 中的资源不应该被 JavaScript 文件引用。

new URL(url, import.meta.url)

import.meta.url是一个 ESM 的原生功能，会暴露当前模块的 URL。将它与原生的 URL 构造器组合使用，在一个JavaScript 模块中，通过相对路径我们就能得到一个被完整解析的静态资源 URL：

const imgUrl = new URL('./img.png', import.meta.url).href

document.getElementById('hero-img').src = imgUrl

这在现代浏览器中能够原生使用 - 实际上，Vite 并不需要在开发阶段处理这些代码！这个模式同样还可以通过字符串模板支持动态URL：

function getImageUrl(name) {

return new URL(`./dir/${name}.png`, import.meta.url).href

}

在生产构建时，Vite 才会进行必要的转换保证 URL 在打包和资源哈希后仍指向正确的地址。然而，这个 URL 字符串必须是静态的，这样才好分析。否则代码将被原样保留、因而在 build.target 不支持 import.meta.url 时会导致运行时错误。

// Vite 不会转换这个

const imgUrl = new URL(imagePath, import.meta.url).href

示例：

<body>  <img id="imgbox"></img>  <script type="module">      // 在原生方式直接这样引用不行呢，需要使用new URL 结合import.meta.url的方式      // import imgUrl from './straw.jpg'      // import.meta是一个给 JavaScript 模块暴露特定上下文的元数据属性的对象。它包含了这个模块的信息，比如说这个模块的 URL。      // 注意：1.js的type类型需是module 2.返回的地址是绝对路径      console.log('import.meta',import.meta)      //new URL() 创建并返回一个URL对象，该 URL 对象引用使用绝对 URL 字符串，相对 URL 字符串和基本 URL 字符串指定的 URL。      // 如果url参数是相对 URL，则构造函数将使用url参数和可选的base参数作为基础。      const url = new URL('./straw.jpg',import.meta.url).href      document.getElementById('imgbox').src = url      // document.getElementById('imgbox').src = imgUrl</script></body>

注意：无法在 SSR 中使用

如果你正在以服务端渲染模式使用 Vite 则此模式不支持，因为 import.meta.url 在浏览器和 Node.js 中有不同的语义。服务端的产物也无法预先确定客户端主机 URL。

更多关于Vue前端相关技术点，敬请关注公众号：CTO Plus后续的发文，有问题欢迎后台留言交流。

总结

总之，Vite是一个非常有用的工具，可以大大加速我们的Web应用程序的开发速度。它的快速启动时间和热更新功能使得开发人员可以更快地测试和调试他们的代码。此外，Vite还提供了许多有用的插件，可以帮助我们进一步加速我们的开发流程。如果你正在寻找一个快速而强大的构建工具，那么Vite绝对值得一试。

最后，希望本文对你了解和使用 Vite 工具有所帮助！

参考链接

Github地址：https://github.com/vitejs/vite.git

import.meta.url

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import.meta

assetsinlinelimit选项

https://cn.vitejs.dev/config/build-options.html#build-assetsinlinelimit

assetsinclude选项

https://cn.vitejs.dev/config/shared-options.html#assetsinclude

vite/client

https://cn.vitejs.dev/guide/features.html#client-types

URL构造器

https://developer.mozilla.org/en-US/docs/Web/API/URL

CSS modules

https://github.com/css-modules/css-modules

大前端专栏
https://blog.csdn.net/zhouruifu2015/category_5734911https://blog.csdn.net/zhouruifu2015/category_5734911Node.js专栏

https://blog.csdn.net/zhouruifu2015/category_5728369.htmlhttps://blog.csdn.net/zhouruifu2015/category_5728369.html

更多资料 · 微信公众号搜索【CTO Plus】关注后，获取更多，我们一起学习交流。

关于公众号的描述访问如下链接

关于Articulate“做一个知识和技术的搬运工。做一个终身学习的爱好者。做一个有深度和广度的技术圈。”一直以来都想把专业领域的技https://mp.weixin.qq.com/s/0yqGBPbOI6QxHqK17WxU8Q