Vue Vite自定义插件启动打印LOGO艺术字

Vite自己自定义一个插件

Vite写插件，实际就是写一个函数，或者类，在里面指定一些特定的钩子函数，这些钩子函数会在特定的打包过程中特定的情况下自动执行。

1. 引入picocolors，后续要用

npm i picocolors -D

2.在根目录下面创建plngin文件夹，里面新建一个MyPlugin.ts文件，文件内容如下：

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

const colors = require("picocolors");
export default function (): PluginOption {
    return {
        name: 'printLogo',
        apply: 'serve',
        enforce: 'pre',
        configureServer(server: ViteDevServer) {
            const print = server.printUrls;
            server.printUrls = () => {
                console.info(colors.green(
                    '' +
                    ' ____      ____   ___         _____ \n' +
                    '|_  _|    |_  _|.\'   `.      |_   _|\n' +
                    '  \\ \\  /\\  / / /  .-.  \\       | |  \n' +
                    '   \\ \\/  \\/ /  | |   | |   _   | |  \n' +
                    '    \\  /\\  /   \\  `-\'  \\_ | |__\' |  \n' +
                    '     \\/  \\/     `.___.\\__|`.____.\'  \n' +
                    '                                    \n' ))
                print();
            }
        }
    }
}

3.在vite.config.js中执行该插件：

import {fileURLToPath, URL} from 'node:url'

import {defineConfig} from 'vite'
import vue from '@vitejs/plugin-vue'
import MyPlugin from "./plugin/MyPlugin";

// https://vitejs.dev/config/
export default defineConfig({
    plugins: [vue(), MyPlugin()],
    resolve: {
        alias: {
            '@': fileURLToPath(new URL('./src', import.meta.url))
        }
    }
})

如此，在启动Vite的时候就多了一个LOGO了，如下图：