用Vite+Vue怎样搭建项目,并配置插件

1,040 阅读10分钟

前言

由于工作使用Vite也有好一段时间了,想写个关于Vite的文章不知道咋下手,想了想就结合项目来说应该会更通俗易懂一点。所以此文章主要内容讲的是在Vite+Vue的项目中怎样进行Vite插件的配置从而进行项目工程化优化,主要讲解的都会是比较常用的一些插件。

下面主要从零搭一个简单的Vite+Vue脚手架,然后在此脚架的基础上进行插件配置。

一、基于vue3+vite搭建一个新项目

(1)安装 create-vite 脚手架

执行如下指令安装 create-vitecreate-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 项目结构,具体目录如下图所示。 image.png

基本目录解释:

  • 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配置就在这个项目的基础上进行配置

image.png

二、熟悉Vite配置

(1)Vite配置位置

Vite 的配置文件是 vite.config.jsvite.config.ts,位于项目根目录的最下方。在这里配置 Vite ,例如配置插件、别名、构建输出等,位置如下所示。

image.png

(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: 指定打包后静态资源文件(例如CSSJavaScript、图片、字体包等等)存放目录名称为 static

rollupOptions.input: 配置项目实际的入口文件为index.html。

完成上述配置后,Vite 在打包构建后会生成文件 dist ,并将对应的静态资源放到 dist/static 下。并且打包构建时会将 index.html 作为入口文件。

image.png

  • 服务配置 (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都能正常使用。如下所示不做任何配置的打包效果

image.png

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

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