//直接使用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
