前言
由于工作使用Vite
也有好一段时间了,想写个关于Vite
的文章不知道咋下手,想了想就结合项目来说应该会更通俗易懂一点。所以此文章主要内容讲的是在Vite+Vue
的项目中怎样进行Vite
插件的配置从而进行项目工程化优化,主要讲解的都会是比较常用的一些插件。
下面主要从零搭一个简单的Vite+Vue
脚手架,然后在此脚架的基础上进行插件配置。
一、基于vue3+vite搭建一个新项目
(1)安装 create-vite 脚手架
执行如下指令安装 create-vite
, create-vite
这个包是 Vite
提供的一个脚手架工具,主要用于创建一个新的 Vite
项目。
npm install -g create-vite
或者
yarn global add create-vite
(2)创建新项目
安装完create-vite
之后直接执行如下指令创建一个my-vue-app
项目。
create-vite my-vue-app --template vue
此时文件夹里面会有一个my-vue-app
新的文件夹,create-vite
会生成一个标准的 Vue
项目结构,具体目录如下图所示。
基本目录解释:
src
目录:存放源代码,例如逻辑代码。public
目录:存放静态资源,例如图片、字体等。package.json
文件:定义项目的依赖和脚本,对应名称和版本。vite.config.js
文件:Vite
的配置文件,插件就是在这时配置。index.html
文件:入口HTML
文件。
(3)安装依赖启动项目
进入到刚创建的文件夹内。
cd my-vue-app
安装项目依赖
npm install
或者
yarn install
启动项目
npm run dev
或者
yarn dev
这个时候一个最基础的Vue
项目就成功启动了,接下来的一切Vite
配置就在这个项目的基础上进行配置
二、熟悉Vite配置
(1)Vite配置位置
Vite
的配置文件是 vite.config.js
或 vite.config.ts
,位于项目根目录的最下方。在这里配置 Vite
,例如配置插件、别名、构建输出等,位置如下所示。
(2)熟悉Vite配置结构
上面图片这是项目最初始的状态,除创建时自带了一个用于支持 .vue
单文件组件的插件,基本什么都没有配置。下面上一段相对完整结构代码介绍Vite
的基本配置结构。
import vue from "@vitejs/plugin-vue";
import { defineConfig } from 'vite';
export default defineConfig({
// 配置别名
resolve: {
alias: {
"@": "/src",
},
},
// 构建配置
build: {
outDir: "dist",
assetsDir: "static",
rollupOptions: {
input: {
main: "index.html",
},
},
},
// 服务配置
server: {
port: 5173,
open: true,
cors: true, // 是否启用跨域资源共享
fs: {
allow: ['..'], // 允许的文件路径
deny: [], // 不允许的文件路径
},
hmr: {
overlay: false,
},
proxy: {
'/api': 'http://localhost:4000'
},
},
// 插件配置
plugins: [vue()],
});
代码结构详细解释
- 别名配置 (
alias
):
@:
这是定义的别名,真实项目中最常用于表示项目的src
目录。 "/src
": 这是@
别名对应的真实路径。最前面的斜杠/
表示这是从项目根目录开始的路径。
如下所示,直接用@/
表示/src
下面的目录,这样在多层级时相当方便,真实项目中必备的配置。
import MyComponent from '../../components/MyComponent.vue';
import MyComponent from '@/components/MyComponent.vue';
- 构建配置 (
build
):
outDir
: 指定打包构建后输出目录名称为dist
。
assetsDir
: 指定打包后静态资源文件(例如CSS
、JavaScript
、图片、字体包等等)存放目录名称为static
。
rollupOptions.input
: 配置项目实际的入口文件为index.html。
完成上述配置后,Vite
在打包构建后会生成文件 dist
,并将对应的静态资源放到 dist/static
下。并且打包构建时会将 index.html
作为入口文件。
- 服务配置 (
server
):
port
: 设置服务器的运行端口,默认运行在端口5173
。
open
: 启动服务器后是否自动打开浏览器运行项目。
hmr
: 热模块替换 (Hot Module Replacement
) 的配置,overlay
设置为false
表示不在页面上显示错误覆盖层。
proxy
: 设置代理规则,用于将特定的请求转发到另一个服务器,例如配置中把/api
转发到http://localhost:4000
,这是必备的代理配置。
cors
:是否启用跨域资源。直接默认为false
。
fs
:文件系统访问权限控制。allow
: 允许访问的文件路径。deny
: 不允许访问的文件路径。
- 插件配置 (
plugins
):
plugins
: 这里预留了一个示例插件的位置, 是一个数组,用来存放Vite
插件。 里面的vue()
: 就是 一个Vue.js
的官方Vite
插件。作用是处理 .vue 单文件组件。后面配置更多实用插件也是在这里配置的。
三、Vite插件配置
Vite
不用配置loader
就能编译和使用css
,这也是和Webpack
不同的地方之一,直接执行打包命令就能完成打包操作,就算不做任何操作Vite
都能正常使用。如下所示不做任何配置的打包效果
但Vite
可以使用丰富的插件进行扩展,下面将部分推荐的实用插件进行一一讲解。
一、vite-plugin-sass 或 vite-plugin-less: 分别支持 SASS 和 Less 样式预处理器
项目中我们一般都会用到less
或者sass
,这里作者以less
为例安装vite-plugin-less
,如果你用的是sass
侧安装vite-plugin-sass
。
作用:当使用
vite-plugin-less
插件能在Vite
项目中处理Less
样式。能编译Less
文件将.less
文件编译为CSS
。并且能当Less
文件发生变化时,会触发热更新。是相当实用的插件。
(1)安装
npm install vite-plugin-less -D
或者
yarn add vite-plugin-less -D
(2)配置
基础配置在 vite.config.js
文件中配置 vite-plugin-less
,引入后放到plugins
数组中即可。
import vue from '@vitejs/plugin-vue';
import { defineConfig } from 'vite';
import less from 'vite-plugin-less';
export default defineConfig({
plugins: [
vue(),
less(),
],
});
如果我们想要让全局组件都能访问某些全局的样式,那么可以在这里通过globalVars
进行引入配置。如下第9
行所示
import vue from '@vitejs/plugin-vue';
import { defineConfig } from 'vite';
import less from 'vite-plugin-less';
export default defineConfig({
plugins: [
vue(),
less({
globalVars: {
globalLessFile: './src/styles/test.less',
},
}),
],
});
二、unplugin-vue-components: 自动按需导入 UI 库的组件
作用:主要作用是在
Vue
项目中自动按需导入UI
库的组件。也就是我们不再需要手动在文件中导入每个组件,而是可以直接在模板中使用组件,因为插件会自动检测并且导入当前使用的组件。
(1)安装
npm install unplugin-auto-import -D
或者
yarn add unplugin-auto-import -D
(2)配置
这里结合Element Plus
为例,安装Element Plus
npm install @element-plus/icons-vue element-plus -D
或者
yarn add @element-plus/icons-vue element-plus -D
在 vite.config.js
文件中配置 unplugin-vue-components
按需引入Element Plus
组件。其中Components
里面进行插件的相关配置,它能告诉 Vite
如何解析 Element Plus
组件。
import Components from 'unplugin-vue-components/vite';
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers';
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
export default defineConfig({
plugins: [
vue(),
Components({
resolvers: [ElementPlusResolver()],
}),
],
});
完成上述配置后在使用Element Plus
组件时就不需要单独引入了。
<template>
<el-button type="primary">你好!天天鸭</el-button>
</template>
<script setup>
// 不需导入el-button
</script>
三、vite-plugin-compression: 对构建后的文件进行压缩
作用:能压缩打包后输出的静态资源文件,如
JavaScript、CSS
文件等,压缩后能减小体积大小从而加快回去速度提高性能,算是比较基础且必备的工程化。
(1)安装
npm install vite-plugin-compression -D
或者
yarn add vite-plugin-compression -D
(2)配置
引入后,主要在compression
里面进行打包相关的配置,主要配置说明如下
verbose
: 输出压缩过程中详细的信息。disable
: 是否禁用压缩功能。threshold
: 只压缩大于此大小的文件,默认为10KB,即10240 字节。algorithm
: 选择什么压缩算法,可以选择 'gzip' 或 'brotliCompress'。ext
: 配置压缩后文件的扩展名。deleteOriginFile
: 是否删除原始未压缩的文件。默认为 false,即保留原始文件。
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import compression from 'vite-plugin-compression';
export default defineConfig({
plugins: [
vue(),
compression({
disable: false,
threshold: 10240,
verbose: true,
algorithm: 'gzip',
deleteOriginFile: false,
ext: '.gz',
}),
],
});
完成上述配置后,执行打包命令时vite-plugin-compression
插件将会对构建输出的文件进行相应配置的压缩。
四、vite-plugin-optimize-images: 优化和压缩图像文件
作用:主要用于打包过程中压缩图像文件,从而减小图像文件的大小,达到优化加载性能的目的。
(1)安装
npm install vite-plugin-optimize-images -D
或者
yarn add vite-plugin-optimize-images -D
(2)配置
引入后,主要在optimizeImages
中进行压缩的相关配置,主要配置说明如下
enable
: 是否启用图片优化,默认为true
。gifsicle
:GIF
图片优化配置。jpegtran
:JPEG
图片优化配置。mozjpeg
: 使用mozjpeg
优化JPEG
图片时的质量百分比。optipng
:PNG
图片优化配置。pngquant
: 使用pngquant
优化PNG
图片时的质量范围和速度。svgo
:SVG
图片优化相关配置。webp
:WebP
图片的质量百分比。
import optimizeImages from 'vite-plugin-optimize-images';
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
export default defineConfig({
plugins: [
vue(), // Vue.js 的 Vite 插件
optimizeImages({
enable: true, // 启用图片优化
gifsicle: {
interlaced: false, // 配置GIF 图片是否交错
},
pngquant: {
speed: 2, //配置 PNG 图片的优化速度
quality: [0.65, 0.9], //配置 PNG 图片的质量范围
},
jpegtran: {
progressive: true, // 配置JPEG 图片是否使用渐进式编码
},
optipng: {
optimizationLevel: 3, //配置 PNG 图片的优化级别
},
mozjpeg: {
quality: 75, // 使用 mozjpeg 时的质量百分比
},
svgo: {
plugins: [
{
name: 'removeViewBox',
active: false, // 配置是否移除 SVG 的 viewBox 属性
},
{
name: 'addAttributesToSVGElement',
params: {
attributeValue: 'svg-icon', //配置 给 SVG 添加 class 属性
attributeName: 'class',
},
},
],
},
webp: {
quality: 75, // 配置WebP 图片的质量百分比
},
}),
],
});
完成上述配置后,执行打包命令时vite-plugin-optimize-images
插件将会对构建输出的图像文件进行相应配置的压缩。
最后上一个完整vite.config.js
配置
import vue from "@vitejs/plugin-vue";
import { defineConfig } from 'vite';
import less from 'vite-plugin-less';
import Components from 'unplugin-vue-components/vite';
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers';
import compression from 'vite-plugin-compression';
import optimizeImages from 'vite-plugin-optimize-images';
export default defineConfig({
// 配置别名
resolve: {
alias: {
"@": "/src",
},
},
// 构建配置
build: {
outDir: "dist",
assetsDir: "static",
rollupOptions: {
input: {
main: "index.html",
},
},
},
// 服务配置
server: {
port: 5176,
open: true,
hmr: {
overlay: false,
},
},
// 插件配置
plugins: [
vue(),
less(),
Components({
resolvers: [ElementPlusResolver()],
}),
compression({
threshold: 10240,
verbose: true,
disable: false,
algorithm: 'gzip',
deleteOriginFile: false,
ext: '.gz',
}),
optimizeImages({
enable: true, // 启用图片优化
mozjpeg: {
quality: 75, // 配置使用 mozjpeg 时的质量百分比
},
gifsicle: {
interlaced: false, // 配置GIF 图片是否交错
},
jpegtran: {
progressive: true, // 配置JPEG 图片是否使用渐进式编码
},
pngquant: {
quality: [0.65, 0.9], // 配置PNG 图片的质量范围
speed: 2, // 配置PNG 图片的优化速度
},
optipng: {
optimizationLevel: 3, // 配置PNG 图片的优化级别
},
svgo: {
plugins: [
{
active: false, // 配置是否移除 SVG 的 viewBox 属性
name: 'removeViewBox',
},
{
name: 'addAttributesToSVGElement',
params: {
attributeValue: 'svg-icon', // 配置给 SVG 添加 class 属性
attributeName: 'class',
},
},
],
},
webp: {
quality: 75, // 配置WebP 图片的质量百分比
},
}),
],
});
小结:
总结下来Vite
会对比发现比传统的Webpack
配置起来其实简单很多的,像Webpack
的热更新还需要借助 webpack-dev-server
插件。而Vite
本身就内置了根本无需求配置。Vite
甚至连loader
都不需要配置而直接开箱即用。
所以我上面只是教大家配置几个基本上是项目必用的插件,按需加载和打包压缩之类的,其它还有很多很好用的插件就要看项目需求而定了,基本上都是同样的步骤按文档要求进行引入。好啦文章先到这里,如果有什么写的不对或者有更好的建议欢迎大佬指出哈。