用Vite+Vue怎样搭建项目，并配置插件主要从零搭一个简单的Vite+Vue脚手架，然后在此脚架的基础上从零到一带大家

前言

由于工作使用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都不需要配置而直接开箱即用。

所以我上面只是教大家配置几个基本上是项目必用的插件，按需加载和打包压缩之类的，其它还有很多很好用的插件就要看项目需求而定了，基本上都是同样的步骤按文档要求进行引入。好啦文章先到这里，如果有什么写的不对或者有更好的建议欢迎大佬指出哈。