背景🔥🔥🔥🔥
在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。如果文章对你有所帮助,能否帮我点个免费的赞和收藏😍。
👇 👇 👇 👇 👇 👇 👇 👇 👇 👇 👇 👇