如何在vite启动的时候在控制台输出自己想要的内容

515 阅读1分钟

众所周知,在后端启动的时候,他们的控制台会输出一些自定义的内容,我们想在前端启动的时候在控制台怎么输出呢

第一步先下载vite的插件yarn add picocolors\npm i picocolors

第二步在你的vite项目里的src目录下创建plugin文件夹从这个文件夹里管理你所有的vit插件,这个时候要创建我们的插件文件了名字为picocolors.js

创建结束后把` import colors from 'picocolors';

export default function vitePluginVueMonitor () {

return {

    apply: 'serve',
    enforce: 'pre',
    configureServer(server) {
        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(`              
              你要输出的自定义内容
                ░░     ░░ ░░░░  ░░░░░░  ░░░░░░ 
                `))
                print();
            }
        }
    }
}

} ` 这段代码复制进去后把你这个插件文件添加到你的vite文件里就ok了