Vite4自定义插件之终端打印自定义logo(图案)

背景🔥🔥🔥🔥

在SpringBoot项目启动成功的时候，终端会打印出由字符组成的图案以及版本信息。SpringBoot还提供了配置文件(banner)进行自定义Logo内容。所以实现起来就比较容易。其实Vite项目中也可以实现这种效果。因为它并没有提供相关的配置，所以我们得自己手动写一个插件。这里就不对Vite自定义插件进行讲解了，网上资源很多。免得写多了大家也看得云里雾里的。废话不多说，开搞。

一、启动模式

1、SpringBoot启动成功😄😄😄😄

2、Vite启动成功(原始)😟😟😟😟

3、Vite启动(增加图案)😍😍😍😍

这里是一个很不错的图案生成网站，资源很丰富

4、安装依赖 🔨🔨🔨🔨

这里会用一个插件，picocolors，它是一个可以修改终端输出字符颜色的 npm 包。

yarn add picocolors

5、新建src/plugin/vitePluginStart.ts文件🔨🔨🔨🔨

import type { PluginOption, ViteDevServer } from 'vite';
import colors from 'picocolors';

export default function vitePluginVueMonitor (): PluginOption  {

    return {
        name: 'ts-start',
        apply: 'serve',
        enforce: 'pre',
        configureServer(server: ViteDevServer) {
            const print = server.printUrls;
            server.printUrls = () => {
                const network = server.resolvedUrls?.network[0];
                const local = server.resolvedUrls?.local[0];
                if (!network && !local) {
                    console.log(colors.red('获取IP地址失败,请检查vite.config.ts文件中server.host配置是否正确!\n'))
                } else {
                    console.info(colors.green(' _________  _                         ______                           \n' +
                        '|  _   _  |(_)                      .\' ____ \\                          \n' +
                        '|_/ | | \\_|__   .--./) .---.  _ .--.| (___ \\_|  .--.   _ .--.   .--./) \n' +
                        '    | |   [  | / /\'`\\;/ /__\\\\[ `/\'`\\]_.____`. / .\'`\\ \\[ `.-. | / /\'`\\; \n' +
                        '   _| |_   | | \\ \\._//| \\__., | |   | \\____) || \\__. | | | | | \\ \\._// \n' +
                        '  |_____| [___].\',__`  \'.__.\'[___]   \\______.\' \'.__.\' [___||__].\',__`  \n' +
                        '  Author: Etc.End                             Email:710962805@qq.com             \n'))
                    print();
                }
            }
        }
    }
}

6、vite.config.ts中引入刚刚写好的插件🔨🔨🔨🔨

import { defineConfig } from 'vite'
import path from 'path'
import vue from '@vitejs/plugin-vue'
const pathSrc = path.resolve(__dirname, 'src')
// 注意这里千万不要使用@，因为这里还不能识别你配置文件系统路径别名
import vitePluginStart from './src/plugin/vitePluginStart.ts'

export default defineConfig({
  resolve: {
    alias: {
      '@': pathSrc,
    }
  },
  plugins: [
    vue(),
    vitePluginStart(),
  ],
  server: {
    host: '0.0.0.0', // 指定服务器应该监听哪个 IP 地址
    port: 9527, // 指定开发服务器端口
    strictPort: true, // 若端口已被占用则会直接退出
    open: false, // 启动时自动在浏览器中打开应用程序
  }
})

7、最终效果浏览 💥 ✨ ⭐️ 🌟 💥

二、打包模式

打包的话逻辑也差不多，只是apply的区别，我这里的话就分为两个文件，方便小伙伴们查阅，后面可以自己合成一个文件，并且里面的打印图案值可以放到外部的文件或者env变量中。

1、新建文件src/plugin/vitePlugin/ts-build.ts

import type { ConfigEnv, PluginOption, UserConfig } from 'vite';
import colors from 'picocolors';

export default function vitePluginVueMonitor (): PluginOption  {
    let outDir:string = 'dist'
    return {
        name: 'ts-build',
        apply: 'build', // 值可以是 build 或 serve 亦可以是一个函数，指明它们仅在 build 或 serve 模式时调用
        // normal(默认值)第二批配执行的插件，会在vite的build阶段之前被执行，可以根据配置判断是否需要处理当前文件的代码。
        // pre首批被执行的插件，会在@rollup/plugin-alias插件执行之后执行。
        // post会在vite的build阶段之后被执行，进行代码构建方面的工作(minimize、代码分析...)。
        enforce: 'pre',
        config(config: UserConfig, configEnv:ConfigEnv) {
            if (configEnv.command === 'build') {
                outDir = config.build?.outDir || 'dist';
            }
        },
        closeBundle() {
            console.log(colors.green(
                '                          _ooOoo_                               \n' +
                '                         o8888888o                              \n' +
                '                         88" . "88                              \n' +
                '                         (| ^_^ |)                              \n' +
                '                         O\\  =  /O                              \n' +
                '                      ____/`---\'\\____                           \n' +
                '                    .\'  \\\\|     |  `.                         \n' +
                '                   /  \\\\|||  :  |||//  \\                        \n' +
                '                  /  _||||| -:- |||||-  \\                       \n' +
                '                  |   | \\\\\\  -  / |   |                       \n' +
                '                  | \\_|  \'\'\\---/\'\'  |   |                       \n' +
                '                  \\  .-\\__  `-`  ___/-. /                       \n' +
                '                ___`. .\'  /--.--\\  `. . ___                     \n' +
                '              ."" \'<  `.___\\_<|>_/___.\'  >\'"".                  \n' +
                '            | | :  `- \\`.;`\\ _ /`;.`/ - ` : | |                 \n' +
                '            \\  \\ `-.   \\_ __\\ /__ _/   .-` /  /                 \n' +
                '      ========`-.____`-.___\\_____/___.-`____.-\'========         \n' +
                '                           `=---=\'                              \n' +
                '      ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^        \n' +
                '            佛祖保佑       永不宕机     永无BUG                    \n' +
                '           TigerSong       Etc.End      BuildEnd                  \n'))
        }
    }
}

2、效果

我是Etc.End。如果文章对你有所帮助，能否帮我点个免费的赞和收藏😍。

👇 👇 👇 👇 👇 👇 👇 👇 👇 👇 👇 👇