Vite学习笔记及其实践｜青训营Vite使用过后感觉真的是个好东西，什么是Vite呢？Vite是一种新型的前端构建工

Vite使用过后感觉真的是个好东西，什么是Vite呢？Vite是一种新型的前端构建工具，它能显著改善前端开发体验。在青训营的学习中,我对Vite有了进一步的了解和实践,记下了这些学习笔记与心得体会,与大家分享。

Vite最大的特点是利用浏览器原生 ES imports 实现了极速的冷服务启动。通过在服务器端用原生 ES modules 转换并服务源码,Vite 完全跳过了打包这个概念,服务器随起即编译,可实现轻量快速的热重载。

Vite的基本使用

创建项目

使用 npm init vite 创建项目时可以选择 React/Vue/Preact等框架预配置,非常便捷。

项目结构

Vite项目结构非常简洁,仅有核心的src源码目录和配置文件,十分轻量。

模块导入

Vite支持标准的ES module语法,直接使用import导入模块。

运行和构建

使用npm run dev启动开发服务器,修改源码后可以快速热更新。npm run build进行生产构建。

极速的启动服务提升了开发效率,修改代码可以近乎实时更新。
轻量的配置降低了项目配置成本,更专注于核心代码开发。
原生ESM的支持简化了模块导入使用,可以直接使用优雅的import语法。
Vite为不同框架都提供了优化的预配置,非常容易上手使用。

学习过程中的踩坑点:

导入非ESM模块时需要在vite.config.js添加optimizeDeps配置。

需要使用public目录而不是src目录存放静态资源。

引入资源路径需要使用以'/'开头的绝对路径。

需要加载的静态资源要在vite.config.js中配置assetsInclude。

下面这个是用Vite构建的一个简单vue项目:


import { createApp } from 'vue'
import App from './App.vue'

createApp(App).mount('#app')


<template>
  <img alt="Vue logo" src="./assets/logo.png" />
  <HelloWorld msg="Hello Vue 3 + Vite" />
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'

export default {
  name: 'App',
  components: {
    HelloWorld
  }
}
</script>

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  plugins: [vue()]
})

Vite学习笔记及其实践 ｜ 青训营

Vite学习笔记及其实践｜青训营