控制台打印佛祖

//直接使用console
console.log([
    "%c",
    " __  __     _                      _             ",
    " \\ \\/ /    (_)    __ _     ___    | |     _  _   ",
    "  >  <     | |   / _` |   / _ \\   | |__  | +| |  ",
    " /_/\\_\\   _|_|_  \\__,_|   \\___/   |____|  \\_,_|  "

  ].join('\n'), 'color:red');

image.png

第二种方法是使用picocolors

npm i picocolors -D

在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(
                        console.log(
                            colors.green(
                                " __  __     _                      _             \n"+
                                " \\ \\/ /    (_)    __ _     ___    | |     _  _   \n"+
                                "  >  <     | |   / _` |   / _ \\   | |__  | +| |  \n"+
                                " /_/\\_\\   _|_|_  \\__,_|   \\___/   |____|  \\_,_|  "

                            )
                        )
                    );
                    print();
                }
            };
        },
    };
}

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

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import eslintPlugin from 'vite-plugin-eslint';

import vitePluginStart from './src/plugin/vitePluginStart.ts';
// https://vitejs.dev/config/
export default defineConfig({
    plugins: [
        vue(),

        vitePluginStart(),
        eslintPlugin({
            include: ['src/**/*.ts', 'src/**/*.vue', 'src/*.ts', 'src/*.vue'],
        }),
    ],

    resolve: {
        // 配置路径别名
        alias: {
            '@': '/src',
        },
    },
});

image.png

字符串生成工具
https://www.bootschool.net/ascii-art