Shuyx Blog

简体中文

English

简体中文

English

日夜模式

🗂️ 文章分类： 前端  
🏷️ 文章标签： Vite  
📅 文章创建时间： 2026-08-17
🕘️ 文章最后更新时间：2026-08-17

[toc]

Vite笔记1 ​

vite_2026-08-18_095408_384.png

Vite 官网 https://cn.vite.dev/

Vite介绍 ​

Vite 是由尤雨溪及其团队于2019年开发的前端构建工具，旨在解决传统的前端构建工具在大型项目中面临的启动缓慢、热更新延迟等性能瓶颈问题。

什么是前端构建工具？ ​

浏览器原生只能识别普通 JS、CSS、图片等资源文件，无法识别所有类型的前端资源文件。

但现代前端项目中会用到：TS文件、Less/Sass文件、Vue/React 组件文件、npm 第三方包。这些代码浏览器无法识别，并且不能直接运行在浏览器上。

因此我们需要一个工具来帮我们将这些文件处理为浏览器可以识别的资源文件。

因此前端构建工具，就负责干这些事：

  1. 转译：TS→JS、Sass→CSS
  2. 依赖打包：把分散几十个上百个 js 文件、第三方库合并处理
  3. 资源处理：图片、字体、静态文件拷贝、压缩
  4. 生产打包优化：代码压缩、删除没用代码、拆分文件、减小包体积，最终输出可以直接部署上线的 dist 文件夹。
  5. 开发服务器：提供一个本地开发环境，更新项目代码，可以实时查看浏览器效果。

简而言之,前端构建工具就是Vue、React等前端项目的「加工厂和运行环境」。输入是你写的源码，输出是可以丢到服务器部署、浏览器能正常跑的产物。

有哪些前端构建工具？ ​

webpack

webpack 是曾经的行业绝对霸主，2016‑2022年几乎是所有 Vue2、React 前端项目标配的前端构建工具。

  • 优点：生态极其成熟、几乎什么文件都能处理、可定制程度极高
  • 缺点：项目大的时候启动慢、热更新慢；配置项繁多、上手复杂

Rollup

Rollup 是一个基于 Node.js 的模块打包工具，主要用来打包组件库、工具库等（比如 Vue3 源码本身就是 Rollup 打包）。

  • 默认适合打包成干净的 ES 模块；做大型业务应用需要额外插件
  • 缺点：开发服务器能力弱，做业务项目不如 Webpack/Vite 顺手

esbuild

esbuild 是 Go 语言写的极速打包器，速度比 Webpack 快几十倍。只负责编译、打包，不自带完整开发服务、热更新

Vite 底层开发模式就重度依赖 esbuild

什么是Vite ？ ​

Vite 是尤雨溪团队推出的新一代前端构建工具，2022 之后的前端项目首选前端构建工具。

Vite 不是一个从零发明的全新打包器，而是一套整合了 ESM、esbuild、Rollup 的现代化工程方案，最大的优势就是开发环境飞快、上手门槛低，也是现在绝大多数前端新项目的首选。

Vite 安装 ​

前置依赖 ​

Vite 是基于 Node.js 的工具，必须先装 Node.js 。不同版本 Vite 对 Node.js 版本的要求不同。

推荐安装 Vite 稳定版，不要用太前沿的测试版。

安装 ​

注意：很多新手有一个误区。就是 Vite 本质是一个前端项目依赖包，不是本地工具。每个前端项目自带自己的 vite 版本，互不干扰。因此Vite是安装在项目工程内的，而不是电脑本地上的。

安装方式如下

bash
# 进入你的项目目录
cd my-vite-project

# 安装 Vite 到 devDependencies开发依赖中
npm i -D vite

# 查看版本
npx vite --version

更新 ​

当我们的前端工程长时间不再改动时，过一段时间之后，如何将前端工程的Vite版本升级到最新稳定版？

在前端项目中,Vite、NodeJS、Vue 三者是有版本约束的：

正确逻辑的是：更新 Vite 首先保证本机 Node 达到最低版本，并且同步升级对应的 @vitejs/plugin‑vue 插件；Vue 本体版本视报错情况、按需升级，而不是强制升级。

注意：Vue 本身不直接绑定 Vite，是靠插件 plugin‑vue 做桥梁的。

bash
# 查询当前NodeJS版本,确保版本符合
node -v 
# 查询当前NPM版本（通常node内置npm,无需单独安装）
npm -v
# 进入到某个需要升级vite的前端项目目录下，执行以下命令。优先同步升级 Vite + @vitejs/plugin‑vue
npm install vite@latest @vitejs/plugin-vue@latest -D
# 升级完成后，重新安装项目依赖
npm install
# 重新启动项目,确认项目能够正常运行
npm run dev

⚠️风险提醒：Vite大版本跨版本升级 (比如 5.x→6.x) 可能会有破坏性改动，不是所有的升级能够成功。升级完务必完整跑一遍项目测试，确认项目能够正常运行。

用 Vite 创建 Vue 工程 ​

使用nvm 管理nodejs ​

当你想用最新稳定版的vue和vite创建一个前端工程时，需要先确保你已经安装了最新稳定版的nodejs。

因此我们可以用nvm来管理nodejs的版本。通过nvm可以安装和切换不同版本的nodejs。

创建Vue工程 ​

① 第一步：创建前端工程

bash
# 用该命令创建一个前端项目
npm create vite@latest

如图所示，兼容性注意： vite_2026-08-18_155742_026.png

② 第二步：选择vue模板

如图所示，用该命令可以创建大部分的前端工程。如果要创建vue工程，选择vue模板即可。 vite_2026-08-18_160109_434.png

注意：在创建工程的过程中，会有很多选项。根据自己的需求，选择不同的选项。

③ 启动前端工程并访问首页页面

进入到创建好的前端工程目录下，执行以下命令启动前端工程。

bash
# 安装依赖
npm install
# 运行前端工程
npm run dev
# 上面命令运行之后，会出现首页链接地址。浏览器访问该链接即可。
# 例如： http://localhost:5173/

如图所示。浏览器访问前端工程的首页 vue3_20231117214531.png

Vue工程中的文件 ​

vue3_20231117235036.png

package.json 项目依赖文件

下面是项目依赖文件的部分代码。可以看到当前工程依赖的vite,vue版本信息。

js
  "dependencies": {
    "vue": "^3.5.40",
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^6.0.8",
    "vite": "^8.1.5",
    "vite-plugin-vue-devtools": "^8.1.5"
  },
  "engines": {
    "node": "^22.18.0 || >=24.12.0"
  }

index.html 主页面

html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <link rel="icon" href="/favicon.ico">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vite App</title>
  </head>
  <body>
    <div id="app"></div>
    <script type="module" src="/src/main.js"></script>
  </body>
</html>

APP.vue

html
<script setup>
import HelloWorld from './components/HelloWorld.vue'
import TheWelcome from './components/TheWelcome.vue'
</script>

<template>
  <header>
    <img alt="Vue logo" class="logo" src="./assets/logo.svg" width="125" height="125" />
    <div class="wrapper">
      <HelloWorld msg="You did it!" />
    </div>
  </header>
  <main>
    <TheWelcome />
  </main>
</template>

APP.vue就是vue的根组件文件。所有的vue组件都是挂载到APP.vue这个根组件下的。

main.js 主js文件

js
// 导入主要的样式文件
import './assets/main.css'
// 从vue库中导入一个函数，createApp
import { createApp } from 'vue'
// 导入APP.vue文件
import App from './App.vue'
//通过createApp函数将APP.vue文件挂载到index.html中的id=app的html标签上。
createApp(App).mount('#app')

main.js文件的作用如下：

  • 首先导入主样式main.css文件
  • 导入createApp函数和APP.vue文件
  • 将APP.vue文件挂载到index.html中id=app的html标签上。
  • 所有有关vue的页面样式都是先在APP.vue根组件中渲染，然后在挂载到index.html中展示出来。

vite的环境配置文件 ​

我们可以在前端工程中添加环境配置文件。

当我们运行前端工程的时候，可以根据启动命令不同，从而加载不同的环境配置文件。

例如 .env.development 文件 和 .env.production 文件

.env.development 文件

js
# 本地环境
VITE_ENV = development
# 标题
VITE_APP_TITLE = SHUYX ADMIN UI
# 接口路径首地址
VITE_APP_API_BASEURL = /api
# 本地端口
VITE_APP_PORT = 31000

.env.production 文件

js
# 生产环境
VITE_ENV = production
# 标题
VITE_APP_TITLE = SHUYX ADMIN UI
# 接口路径首地址
VITE_APP_API_BASEURL = /api
# 本地端口
VITE_APP_PORT = 31000

当我们对工程进行npm run dev启动的时候，会默认加载.env.development文件的环境配置。

当我们对工程进行npm run build启动的时候，会默认加载.env.production文件的环境配置。

注意环境配置文件的环境变量名称，必须是VITE开头，并且名称由大写字母组成。

如何在前端工程中使用环境配置文件中的配置信息？

js
// 前端工程应用运行的模式。即development 或 production
import.meta.env.MODE 
// 获取环境配置文件中的VITE_APP_TITLE
import. meta.env.VITE_APP_TITLE

vite.config.js 文件 ​

我们通常可以在vite.config.js 中配置前端工程的启动端口和请求代理等配置。

并且我们可以将vite.config.js文件和环境配置文件结合起来。

下面是我常用的vite.config.js文件

通常情况下，vite.config.js无法正常获取环境配置文件的配置信息。

js
import { fileURLToPath, URL } from 'node:url'
import { defineConfig,loadEnv} from 'vite'
import vue from '@vitejs/plugin-vue'

// https://vitejs.dev/config/
export default defineConfig(({mode}) =>  {
  //此处process报错，不影响使用
  //获取环境配置文件的信息
  const env = loadEnv(mode, process.cwd(), "")
  return {
    plugins: [
      vue(),
    ],
    resolve: {
      alias: {
        '@': fileURLToPath(new URL('./src', import.meta.url))
      }
    },
    //服务相关配置，包括端口，请求转发代理等
    server: {
      host: '127.0.0.1',
      port: env.VITE_APP_PORT,  //读取环境配置文件中的端口
      proxy: {
        //当接口路径是/api开头的时候，将请求转发到如下地址
        '/api': {
          target: "http://127.0.0.1:38080",
          changeOrigin: true,
          rewrite: (p) => p.replace(/^\/api/, '')  //将接口路径中的/api替换为空字符串
        }
      }
    }
  }
})

vite.config.js 配置跨域 ​

什么是跨域？

通常服务器与服务器之间互相请求数据，并不会发送跨域问题。跨域问题通常出现在浏览器上。

由于浏览器的安全限制，当服务器A通过浏览器去访问服务器B的资源的时候。如果两个服务器的域名、端口、协议任一不同，那么浏览器认为这时跨域行为，浏览器从而给出跨域警告。

如何在vite中配置跨域?

通过在vite.config.js中配置proxy代理。通过请求转发的方式来解决跨域问题。

js
import { fileURLToPath, URL } from 'node:url'
import { defineConfig,loadEnv} from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig(({mode}) =>  {
  const env = loadEnv(mode, process.cwd(), "")
  return {
    //....此处省略部分代码
    //服务相关配置，包括端口，请求转发代理等
    server: {
      host: '127.0.0.1',
      port: env.VITE_APP_PORT,  //读取环境配置文件中的端口
      proxy: {
        //当接口路径是/api开头的时候，将请求转发到如下地址
        '/api': {
          target: "http://127.0.0.1:38080",
          changeOrigin: true,
          rewrite: (p) => p.replace(/^\/api/, '')  //将接口路径中的/api替换为空字符串
        }
      }
    }
  }
})

当进行上面的配置后。/api开头的请求会被proxy代理转发到目标服务器中。

例如 127.0.0.1:3000/api/test/test1 -> http://127.0.0.1:38080/test/test1