vite学习笔记

destinying2025-07-04 9:58

1. 什么是 Vite？

Vite 是一个现代化的前端构建工具，由 Vue.js 的作者尤雨溪开发。Vite 旨在提供更快的开发体验，特别是在现代浏览器中。它的名字来源于法语单词 "vite"，意思是 "快速"。

Vite 的主要特点包括：

  • 快速的冷启动：利用浏览器原生 ES 模块支持，Vite 可以在开发模式下快速启动应用。
  • 按需编译：Vite 只在浏览器请求时编译文件，而不是一次性编译整个项目。
  • 内置开发服务器：Vite 提供了一个内置的开发服务器，支持热模块替换（HMR）。
  • 多框架支持：虽然 Vite 最初是为 Vue.js 设计的，但它也支持 React、Preact、Svelte 等框架。

2. 安装 Vite

要使用 Vite，首先需要安装 Node.js（建议使用最新稳定版）。然后可以通过 npm 或 yarn 来安装 Vite。

csharp 复制代码 
# 使用 npm
npm install -g create-vite
​
# 使用 yarn
yarn global add create-vite

3. 创建一个 Vite 项目

安装完成后，可以使用 create-vite 命令来创建一个新的 Vite 项目。

perl 复制代码 
npm create vite@latest my-vite-app
yarn create vite my-vite-app

在创建项目时，Vite 会提示你选择一个模板（如 Vue、React、Svelte 等）。选择你喜欢的框架后，Vite 会自动生成项目结构。

4. 项目结构

一个典型的 Vite 项目结构如下：

arduino 复制代码 
my-vite-app/
├── node_modules/
├── public/
│   └── favicon.ico
├── src/
│   ├── assets/
│   ├── components/
│   ├── App.vue
│   └── main.js
├── index.html
├── package.json
├── vite.config.js
└── README.md
  • public/ ：存放静态资源文件，如 favicon.ico。
  • src/ ：项目的源代码目录。
  • index.html：项目的入口 HTML 文件。
  • vite.config.js：Vite 的配置文件。

5. Vite 配置文件

Vite 的配置文件 vite.config.js 允许你自定义构建行为。以下是一个简单的配置示例：

php 复制代码 
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
​
export default defineConfig({
  plugins: [vue()],
  server: {
    port: 3000,
    open: true,
  },
  build: {
    outDir: 'dist',
    assetsDir: 'assets',
  },
});
  • plugins：配置 Vite 插件，如 Vue 插件。
  • server：配置开发服务器，如端口号和自动打开浏览器。
  • build：配置生产构建，如输出目录和静态资源目录。

6. 使用插件

Vite 支持丰富的插件生态系统。你可以通过安装和配置插件来扩展 Vite 的功能。例如，要使用 Vue 插件，可以安装 `@vitejs/plugin-

sql 复制代码 
# 使用 npm
npm install @vitejs/plugin-vue --save-dev
​
# 使用 yarn
yarn add @vitejs/plugin-vue --dev

然后在 vite.config.js 中配置插件：

javascript 复制代码 
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
​
export default defineConfig({
  plugins: [vue()],
});

7. 使用 TypeScript

Vite 支持 TypeScript。要使用 TypeScript，只需在项目中安装 typescript

复制代码 
npm install typescript -D

创建tsconfig.json,添加必要的配置项，

json 复制代码 
 {
   "compilerOptions": {
     "target": "ESNext",
     "module": "ESNext",
     "moduleResolution": "node",
     "strict": true,
     "jsx": "preserve",
     "sourceMap": true,
     "resolveJsonModule": true,
     "esModuleInterop": true,
     "lib": ["ESNext", "DOM"],
     "isolatedModules": true
   },
   "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx"]
 }

在使用 Vite 和 TypeScript 时，配置路径别名（如 @ 指向 src 目录）可以通过 vite-tsconfig-paths 插件来简化

1.安装依赖

css 复制代码 
npm install vite-tsconfig-paths --save-dev

2.配置 vite.config.ts

在 vite.config.ts 文件中引入并配置 vite-tsconfig-paths 插件：

javascript 复制代码 
import { defineConfig } from 'vite';
import tsconfigPaths from 'vite-tsconfig-paths';

export default defineConfig({
  plugins: [tsconfigPaths()],
});

3.配置tsconfig.json

json 复制代码 
{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"]
    }
  }
}

4.安装 @types/node

由于 TypeScript 不直接支持 Node.js 的 path 模块，需要安装 @types/node 依赖：

sql 复制代码 
npm install @types/node --save-dev

5.使用

现在可以在项目中使用路径别名了，例如：

javascript 复制代码 
import MyComponent from '@/components/xxx.vue';

8. 使用 CSS 预处理器

Vite 支持多种 CSS 预处理器，如 Sass、Less 和 Stylus。要使用 Sass，只需安装 sass：

arduino 复制代码 
//安装sass或者less
npm install -D sass
npm install -D less

文件中使用

xml 复制代码 
<template>
  <div class="example">Hello, Vite!</div>
</template>

<style lang="less">
.example {
  color: #3eaf7c;
  background-color: #f0f0f0;
}
</style>

文件中引用

xml 复制代码 
<style lang="less">
@import url("@/style/base.less");
</style>

使用 PostCSS 插件

复制代码 
npm install -D postcss-nesting\

然后在 postcss.config.js 中配置插件：

ini 复制代码 
module.exports = {
  plugins: {
    'postcss-nesting': {}
  }
};

9. 使用环境变量

在Vite项目中使用环境变量是一项重要的功能，可以帮助开发者根据不同的运行模式（如开发模式、生产模式等）配置不同的参数。以下将详细说明如何在Vite中配置和使用环境变量：

  1. 环境变量文件的创建与命名 在Vite项目中，通常会使用.env系列文件来管理环境变量。这些文件包括：

    • .env: 包含所有通用的环境变量。
    • .env.[mode]: 按模式划分的环境变量文件，例如.env.development和.env.production分别用于开发和生产环境。
    • .env.[mode].local: 在特定模式下加载的本地环境变量文件，例如.env.development.local。

    环境变量文件中的变量名需要以VITE_为前缀，这样Vite才能正确识别并加载这些变量到import.meta.env对象中。

  2. 在代码中访问环境变量 在Vite项目中，可以通过import.meta.env对象访问环境变量。例如：

ini 复制代码 
VITE_API_URL=https://api.example.com
arduino 复制代码 
   console.log('当前环境:', import.meta.env);
   console.log('API URL:', import.meta.env.VITE_API_URL);

这种方式适用于浏览器端代码，因为Vite运行在浏览器环境中。

  1. 在Vite配置文件中使用环境变量 在vite.config.ts中，可以使用loadEnv方法加载环境变量。例如：
arduino 复制代码 
   import { defineConfig } from 'vite';
   import vue from '@vitejs/plugin-vue';

   export default defineConfig({
     plugins: [vue()],
     define: {
       'process.env': process.env
     }
   });

这样可以在配置文件中直接引用环境变量。

  1. 动态环境变量的处理 如果需要动态加载环境变量，可以借助插件或自定义逻辑。例如，通过vite-plugin-dynamic-env插件，可以实现动态注入环境变量。

  2. 环境变量的优先级与覆盖规则 Vite中的环境变量遵循以下优先级规则：

    • 运行时已存在的环境变量优先级最高。
    • .env.[mode].local文件优先级高于.env.[mode]文件。
    • .env.[mode]文件优先级高于通用的.env文件。

  3. HTML模板中的环境变量 在HTML模板中，可以使用特殊语法%VITE_VARIABLE%来引用环境变量。例如：

xml 复制代码 
   <title>%VITE_APP_TITLE%</title>

这些变量会被Vite在构建时替换为实际值。

  1. 注意事项

    • 环境变量文件应存储在项目根目录下，否则可能无法生效。
    • 环境变量文件中的敏感信息不应提交到版本控制系统中，建议使用.env.*.local文件存储。
    • 动态键形式的环境变量（如VITE_API_URL_NAME）在Vite中不支持，需使用静态键形式。

10.使用eslint 和pritter

Vite 项目中可以使用 ESLint 和 Prettier 进行代码规范和格式化管理。以下是详细的配置方法和步骤：

1. 安装依赖

需要安装 ESLint、Prettier 及其相关插件：

  • 安装 ESLint 和 Vue 插件：
css 复制代码 
  npm install eslint eslint-plugin-vue --save-dev
  • 安装 Prettier：
css 复制代码 
  npm install prettier --save-dev
  • 安装 ESLint 和 Prettier 的冲突解决插件 eslint-config-prettier：
lua 复制代码 
  npm install eslint-config-prettier eslint-plugin-prettier --save-dev

2. 配置 ESLint

在项目根目录下创建 .eslintrc.js 文件，并添加以下内容：

arduino 复制代码 
module.exports = {
  root: true,
  env: {
    browser: true,
    es2021: true,
    node: true,
  },
  extends: [
    'eslint:recommended',
    'plugin:vue/recommended',
    'plugin:prettier/recommended',
  ],
  parserOptions: {
    parser: '@typescript-eslint/parser',
  },
  rules: {
    'no-undef': 'off',
    'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
    'prettier/prettier': ['error', { singleQuote: true, semi: false }],
  },
};

上述配置中，eslint-config-prettier 和 eslint-plugin-prettier 被用来解决 ESLint 和 Prettier 的冲突，确保两者不会同时对代码进行格式化操作。

3. 配置 Prettier

在项目根目录下创建 .prettierrc 文件，并添加以下内容：

json 复制代码 
{
  "semi": false,
  "singleQuote": true,
  "printWidth": 80,
  "tabWidth": 2,
  "endOfLine": "auto"
}

该配置文件定义了 Prettier 的格式化规则，例如禁用分号、使用单引号、设置制表符宽度等。

4. 集成到 Vite

在 vite.config.js 文件中引入 ESLint 插件：

javascript 复制代码 
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import eslintPlugin from 'vite-plugin-eslint';

export default defineConfig({
  plugins: [
    vue(),
    eslintPlugin({
      lintOnStart: true, // 开启在启动时检查
      cache: true, // 缓存检查结果以提高性能
    }),
  ],
});

5. 集成到 VSCode

为了在 VSCode 中自动格式化代码，可以在 settings.json 文件中添加以下配置：

json 复制代码 
{
  "editor.formatOnSave": true,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  }
}

11. 使用多页面应用

Vite 支持多页面应用（MPA）。你可以在 vite.config.js 中配置多个入口点：

php 复制代码 
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';

export default defineConfig({
  plugins: [vue()],
  build: {
    rollupOptions: {
      input: {
        main: './index.html',
        about: './about.html',
      },
    },
  },
});

12. 使用自定义路径别名

Vite 支持自定义路径别名。你可以在 vite.config.js 中配置别名：

javascript 复制代码 
import { defineConfig } from 'vite';
import path from 'path';

export default defineConfig({
  resolve: {
    alias: {
      '@': path.resolve(__dirname, './src'),
    },
  },
});

然后在代码中使用别名：

javascript 复制代码 
import MyComponent from '@/components/MyComponent.vue';

13. 使用代理

Vite 支持配置代理服务器，用于解决跨域问题。你可以在 vite.config.js 中配置代理：

javascript 复制代码 
import { defineConfig } from 'vite';

export default defineConfig({
  server: {
    proxy: {
      '/api': {
        target: 'http://localhost:3000',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^/api/, ''),
      },
    },
  },
});

14. 使用 Worker

Vite 支持 Web Workers。你可以直接在 JavaScript 中导入 Worker 文件：

javascript 复制代码 
import MyWorker from './worker.js?worker';
const worker = new MyWorker();
worker.postMessage('Hello, worker!');

15 使用 PWA

Vite 支持渐进式 Web 应用（PWA）。你可以使用 vite-plugin-pwa 插件来实现 PWA 功能：

csharp 复制代码 
# 使用 npm
npm install vite-plugin-pwa --save-dev

# 使用 yarn
yarn add vite-plugin-pwa --dev

然后在 vite.config.js 中配置插件：

php 复制代码 
import { defineConfig } from 'vite';
import { VitePWA } from 'vite-plugin-pwa';

export default defineConfig({
  plugins: [
    VitePWA({
      registerType: 'autoUpdate',
      manifest: {
        name: 'My Vite App',
        short_name: 'ViteApp',
        theme_color: '#ffffff',
        icons: [
          {
            src: '/icons/icon-192x192.png',
            sizes: '192x192',
            type: 'image/png',
          },
          {
            src: '/icons/icon-512x512.png',
            sizes: '512x512',
            type: 'image/png',
          },
        ],
      },
    }),
  ],
});

16. glob-import 批量导入

在 Vite 项目中，import.meta.glob 和 import.meta.globEager 提供了强大的批量导入功能，可以简化多模块项目的文件导入过程。以下是详细的使用方法和注意事项：

基本用法

  1. 异步导入 (import.meta.glob)
  • 通过 import.meta.glob 方法，传入一个匹配模式（如 './glob/*'），返回一个对象，其中键是文件路径，值是动态导入函数。
javascript 复制代码 
const module = import.meta.glob('./glob/*')
 Object.entries(module).forEach(([key, value]) => {
   value().then((res) => {
     console.log(res) // 可以查看到里面对应的内容
   })
 })
  • 该方法适用于按需加载的场景，可以减少初始加载时间。
  1. 同步导入 (import.meta.globEager)

通过 import.meta.globEager 方法，传入一个匹配模式（如 './glob/*'），返回一个对象，其中键是文件路径，值是模块内容。

javascript 复制代码 
const moduleEager = import.meta.glob('./glob/*', { eager: true })
console.log(Object.entries(moduleEager))
  • 该方法适用于模块较少且希望立即加载的情况，避免了异步加载的不便。

使用场景

  1. 批量导入组件

在 Vue 项目中，可以使用 import.meta.glob 或 import.meta.globEager 批量导入组件，并注册到 Vue 实例中。

go 复制代码 
 const modules = import.meta.glob(`./*.vue`, { eager: true })
 const map = {}
 for (let key in modules) {
   const name = 'y-' + getKebabCase(key.split('/')[1].split('.')[0])
   map[name] = modules[key].default
 }
 export default map
  1. 批量导入路由模块
  • 在路由管理中，可以使用 import.meta.glob 批量导入路由模块，实现模块化的路由管理。
javascript 复制代码 
 const dynamicViewsModules = import.meta.glob('../../views/**/*.{vue,tsx}')
 const keys = Object.keys(dynamicViewsModules)
 const matchKeys = keys.filter((key) => {
   const k = key.replace('../../views', '')
   return k.startsWith(`${component}`) || k.startsWith(`/${component}`)
 })
  1. 批量导入图片
  • 在项目中，可以使用 import.meta.globEager 批量导入图片资源，并在页面中使用。
arduino 复制代码 
 const modules = import.meta.globEager('/static/images/left-image/*.*')
 const imageList = Object.values(modules).map(module => module.default)

17. 总结

Vite 是一个功能强大且灵活的构建工具，特别适合现代前端开发。它通过利用浏览器原生 ES 模块支持，提供了极快的开发体验。无论是单页面应用还是多页面应用，Vite 都能轻松应对。通过丰富的插件生态系统，你可以扩展 Vite 的功能，满足各种开发需求。

相关推荐
喝拿铁写前端几秒前
前端实战优化：在中后台系统中用语义化映射替代 if-else，告别魔法数字的心智负担
前端·javascript·架构
超人不会飛40 分钟前
就着HTTP聊聊SSE的前世今生
前端·javascript·http
蓝胖子的多啦A梦44 分钟前
Vue+element 日期时间组件选择器精确到分钟，禁止选秒的配置
前端·javascript·vue.js·elementui·时间选选择器·样式修改
夏天想1 小时前
vue2+elementui使用compressorjs压缩上传的图片
前端·javascript·elementui
The_cute_cat1 小时前
JavaScript的初步学习
开发语言·javascript·学习
海天胜景1 小时前
vue3 el-table 列增加 自定义排序逻辑
javascript·vue.js·elementui
今晚打老虎z1 小时前
dotnet-env: .NET 开发者的环境变量加载工具
前端·chrome·.net
用户3802258598241 小时前
vue3源码解析：diff算法之patchChildren函数分析
前端·vue.js
烛阴1 小时前
XPath 进阶：掌握高级选择器与路径表达式
前端·javascript
小鱼小鱼干1 小时前
【JS/Vue3】关于Vue引用透传
前端
热门推荐
01手机电脑之间快速传输图片视频文件，不压缩画质、不限制大小的方法！02如何将markdown生成pdf03Coze扣子平台完整体验和实践（附国内和国际版对比）04Coze实战第13讲：飞书多维表格读取+豆包生图模型，轻松批量生成短剧封面05鸽了六年的某大厂面试题：你会手写一个模板引擎吗？06扣子（coze）实战|我用扣子搭建了一个自动分析小红薯笔记内容的AI应用|详细步骤拆解07C#调用WechatOCR.exe实现本地OCR文字识别08《C#图解教程 第5版》深度推荐09DeepSeek各版本说明与优缺点分析10Word粘贴时出现“运行时错误53,文件未找到：MathPage.WLL“的解决方案