vite
Vite下一代的前端工具链 ,为开发提供极速响应。
Vite(法语意为 “快速的”,发音 /vit/,发音同 “veet”)是一种新型前端构建工具,能够显著提升前端开发体验。它主要由两部分组成:
- 一个开发服务器,它基于 原生 ES 模块 提供了 丰富的内建功能,如速度快到惊人的 模块热更新(HMR)。
- 一套构建指令,它使用 Rollup 打包你的代码,并且它是预配置的,可输出用于生产环境的高度优化过的静态资源。
根据 vite 官网的介绍,我们需要把握两个重点,一个是 esbuild,另一个就是 Rollup。
创建项目
执行命令,选择自定义配置。
为了搭建一个通用型的 vue 项目,我们需要勾选的项目包括:
- TypeScript
- JSX
- Vue Router
- Pinia
- ESLint
- Prettier
其他选项可以根据需求添加。
下载完成之后,项目的目录结构如下:

安装依赖。
启动本地服务。
项目打包,生成文件到 dist 目录。
查看 scripts , 发现 “build” 命令执行 “run-p type-check build-only”。
“run-p” 是包 “npm-run-all”,提供的命令,代表并行执行后面的命令。另外”run -s”,代表串行执行命令。
1 2 3 4 5 6 7 8 9
| "scripts": { "dev": "vite", "build": "run-p type-check build-only", "preview": "vite preview", "build-only": "vite build", "type-check": "vue-tsc --noEmit -p tsconfig.app.json --composite false", "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore", "format": "prettier --write src/" },
|
项目启动成功之后,查看终端,访问 http://127.0.0.1:5173/。

插件使用
除了官方提供的插件,vite 社区还提供了很多优秀的插件 社区插件地址。
CSS 预处理器
Vite 提供了对 .scss, .sass, .less, .styl 和 .stylus 文件的内置支持
1 2 3 4 5 6 7 8
| # .scss and .sass npm add -D sass
# .less npm add -D less
# .styl and .stylus npm add -D stylus
|
自动引入 api
安装依赖
1
| npm i -D unplugin-auto-import
|
配置 node 环境的 tsconfig 和 types。
1
| npm add -D @tsconfig/node18 @types/node@18
|
修改 vite.config.ts
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24
| import AutoImport from 'unplugin-auto-import/vite';
...
export default defineConfig({ plugins: [ vue(), vueJsx(), AutoImport({ include: [ /\.[tj]sx?$/, /\.vue$/, /\.vue\?vue/, /\.md$/ ], imports: ['vue', 'vue-router', 'pinia'] }), ], })
|
现在 unplugin-auto-import 会帮我们自动在根目录下生成一个 auto-imports.d.ts 文件,该文件包含的是我们配置 vue、vue-rouetr、pinia 里面一些 api 的 ts 类型声明。
修改根目录下的 tsconfig.app.json 文件,在 include 里面新增 “auto-imports.d.ts”。
1 2 3 4 5 6 7 8
| { "include":[ "env.d.ts", "src/**/*", "src/**/*.vue", "auto-imports.d.ts" ] }
|
进入 src/components/HelloWorld.vue , 修改代码做测试。
如图所示:

插件自动帮助我们引入了 “ref” 方法,类似的其他在 vue、vue-router、pinia 中的 api 都会自动引入,前提是它在 auto-imports.d.ts 文件中已声明。
自动引入组件
安装依赖
1
| npm i unplugin-vue-components -D
|
配置插件
1 2 3 4 5 6 7 8 9 10 11 12
| import Components from 'unplugin-vue-components/vite'
export default defineConfig({ plugins: [ Components({ dirs: ['src/components'], extensions: ['vue'] }) ], })
|
项目自动引入 src/components 目录下的组件,我们删除相关代码,依旧正常运行。

自动生成路由
安装依赖
1
| npm install -D vite-plugin-pages
|
插件根据文件目录自动生成路由,我们来修改路由配置
1 2 3 4 5 6 7 8
| import { createRouter } from 'vue-router' import routes from '~pages'
const router = createRouter({ routes, })
|
在 src 下面新建 pages 文件,然后把原来在 views 里面的组件移动到里面,具体如下

ps:在 pages 目录里面新建 […all].vue 文件代表匹配 404 路径的路由页面。
添加到 vite.config.ts
1 2 3 4 5 6 7 8 9 10
| import Pages from 'vite-plugin-pages'
export default defineConfig({ plugins: [ vue(), Pages(), ], })
|
添加类型到 vite-env.d.ts
最后页面生成的路由如下:
- “/“ : “pages/index.vue”
- “/about” : “pages/about/index.vue”
webpack 迁移指南
加载资源文件
1 2
| import imgUrl from './img.png' document.getElementById('hero-img').src = imgUrl
|
启动模式
通过设置 –mode dev,可以读取 .env.dev 的配置
将 VUE_APP_ 的前缀改为 VITE_,这样才能暴露给 vite
1 2
| // .env.dev VITE_SOME_KEY=123
|
具体配置请参考 模式
获取配置
1
| console.log(import.meta.env.VITE_SOME_KEY) // 123
|
vite 本地服务使用 es module,无法加载 commonjs 模块,需要安装插件处理
1
| npm i vite-plugin-commonjs -D
|
添加到 vite.config.ts
1 2 3 4 5 6 7 8 9
| import commonjs from 'vite-plugin-commonjs';
export default defineConfig({ plugins: [ commonjs() ] })
|
使用 antd vue
安装
1
| npm install ant-design-vue@4.x --save
|
自动按需引入组件
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15
| import { AntDesignVueResolver } from 'unplugin-vue-components/resolvers';
export default defineConfig({ plugins: [ Components({ resolvers: [ AntDesignVueResolver({ importStyle: false, }), ], }), ], });
|
vite 配置
请参考注释
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74
| import { fileURLToPath, URL } from 'node:url';
import { defineConfig } from 'vite'; import vue from '@vitejs/plugin-vue'; import vueJsx from '@vitejs/plugin-vue-jsx';
import AutoImport from 'unplugin-auto-import/vite';
import { AntDesignVueResolver } from 'unplugin-vue-components/resolvers';
import Components from 'unplugin-vue-components/vite'; import Pages from 'vite-plugin-pages';
import commonjs from 'vite-plugin-commonjs';
export default defineConfig({ plugins: [ commonjs(), vue(), vueJsx(), Pages(), AutoImport({ include: [ /\.[tj]sx?$/, /\.vue$/, /\.vue\?vue/, /\.md$/ ], imports: ['vue', 'vue-router', 'pinia'] }), Components({ dirs: ['src/components'], extensions: ['vue'], resolvers: [ AntDesignVueResolver({ importStyle: false }) ] }) ], resolve: { alias: { '@': fileURLToPath(new URL('./src', import.meta.url)) } }, server: { open: true, port: 8080, proxy: { '/api': { target: 'http://jsonplaceholder.typicode.com', changeOrigin: true, rewrite: (path) => path.replace(/^\/api/, '') } } }, build: { sourcemap: true }, });
|