当前位置：首页 > news >正文

vite + chalk打印输出彩色命令行

news 2025/7/31 20:40:22

起源：

看到cmd命令打印输入的彩色文字，想要同款！

实现：

1.使用vite 【搭建项目快速！热重载更快！】

2.使用chalk【方案成熟！许多用户推荐！】

步骤1：创建项目：

注意：vite要 NodeJS 20，我用的是nodeJS 22

yarn 用户：

yarn create vite

npm用户：

npm create vite@latest

安装依赖

npm i 或者yarn

步骤2：安装chalk

yarn add chalk或者npm install chalk

步骤3：使用chalk

运行项目后

刚开始的命令行

了解基础chalk的用法

import chalk from 'chalk';console.log(chalk.blue('Hello world!'));

打开vite.config.js

vite.config.js
// ...已有代码
import chalk from 'chalk'const log = console.logexport default defineConfig({
plugins: [vue()],
})// 暂时不用管defineConfig，先试试效果log(chalk.blue('++++++++++++++++++++++++++++++++++++++++++++++'))
log(chalk.blue('++++++++++++++++++++++++++++++++++++++++++++++'))

加上一些有意思的文字

log(chalk.blue('++++++++++++++++++++++++++++++++++++++++++++++'))
log(chalk.red('如果你们有想做的事情，一定要勇敢去做'))
log(chalk.blue('因为只有做了，才知道结果如何！！！！'))
log(chalk.blue('+  Vue Router 4.0.0-beta.1  +'))
log(chalk.blue('+  Pinia 2.0.0-beta.1  +'))
log(chalk.blue('++++++++++++++++++++++++++++++++++++++++++++++'))

实际用途：打印一些当前运行时的信息、打包信息或者你需要输出的标记

实现步骤：

创建几个环境

# .env.development (开发环境)
VITE_APP_ENV=development
VITE_APP_TITLE=开发环境
VITE_APP_API_URL=http://localhost:3000/api
VITE_APP_DEBUG=true# .env.test (测试环境)
VITE_APP_ENV=test
VITE_APP_TITLE=测试环境
VITE_APP_API_URL=https://test-api.yourapp.com
VITE_APP_DEBUG=true# .env.staging (预发布环境)
VITE_APP_ENV=staging
VITE_APP_TITLE=预发布环境
VITE_APP_API_URL=https://staging-api.yourapp.com
VITE_APP_DEBUG=false# .env.production (正式环境)
VITE_APP_ENV=production
VITE_APP_TITLE=正式环境
VITE_APP_API_URL=https://api.yourapp.com
VITE_APP_DEBUG=false注意：
.env 文件我是建了一个空文件！！！没写哦，需要可以把开发环境写进去！！

改一下vite.config.js

import { defineConfig, loadEnv } from 'vite'
import vue from '@vitejs/plugin-vue'
import chalk from 'chalk'
import { readFileSync } from 'fs'
import { resolve } from 'path'
const log = console.log// https://vite.dev/config/
export default defineConfig(({ command, mode }) => {// 加载环境变量const env = loadEnv(mode, process.cwd(), '')const packageJson = JSON.parse(readFileSync(resolve(__dirname, 'package.json'), 'utf-8'))const version = packageJson.version// 根据不同环境配置不同端口const portMap = {development: 3000,test: 3001,staging: 3002,production: 8080}const labelChalk = chalk.white.bgBlueconst infoChalk = chalk.white.bgGreenlog(chalk.blue('————————————————————————————————————————'))log(chalk.red('如果你们有想做的事情，一定要勇敢去做'))log(chalk.red.bold('因为只有做了，才知道结果如何！！！！'))log(labelChalk('本文作者'), infoChalk('SunnyBoy'))log(labelChalk('当前时间'), infoChalk(new Date().toISOString()))log(labelChalk('版本信息'), infoChalk(version))log(labelChalk('环境信息'), infoChalk(mode))log(chalk.blue('————————————————————————————————————————'))return {plugins: [vue()],define: {__APP_VERSION__: JSON.stringify(version),__APP_ENV__: JSON.stringify(mode)},server: {host: '0.0.0.0',port: portMap[mode] || 3000},// 根据环境配置构建选项build: {outDir: `dist-${mode}` // 不同环境构建到不同目录}}
})

改一下package.json

配置一下命令，就是scripts对象里面的配置

配置一下版本号version

其他不用完全照搬的，按照自己的实际来！

{"name": "printcolorful","private": true,"version": "0.0.1","type": "module","scripts": {"dev": "vite","dev:test": "vite --mode test","dev:staging": "vite --mode staging","dev:prod": "vite --mode production","build": "vite build","build:staging": "vite build --mode staging","build:prod": "vite build --mode production","build:test": "vite build --mode test","preview": "vite preview"},"dependencies": {"chalk": "^5.4.1","vue": "^3.5.17"},"devDependencies": {"@vitejs/plugin-vue": "^6.0.0","vite": "^7.0.4"}
}

测试

命令1：yarn build 【npm用户应该用npm run build】

命令2： yarn dev 【npm用户应该用npm run dev】

命令3：yarn dev:test

还有一些进阶的语法和chalk文档

有需要的朋友自取

开发文档 | Chalk 中文网

import chalk from 'chalk';const log = console.log;// Combine styled and normal strings
log(chalk.blue('Hello') + ' World' + chalk.red('!'));// Compose multiple styles using the chainable API
log(chalk.blue.bgRed.bold('Hello world!'));// Pass in multiple arguments
log(chalk.blue('Hello', 'World!', 'Foo', 'bar', 'biz', 'baz'));// Nest styles
log(chalk.red('Hello', chalk.underline.bgBlue('world') + '!'));// Nest styles of the same type even (color, underline, background)
log(chalk.green('I am a green line ' +chalk.blue.underline.bold('with a blue substring') +' that becomes green again!'
));// ES2015 template literal
log(`
CPU: ${chalk.red('90%')}
RAM: ${chalk.green('40%')}
DISK: ${chalk.yellow('70%')}
`);// Use RGB colors in terminal emulators that support it.
log(chalk.rgb(123, 45, 67).underline('Underlined reddish color'));
log(chalk.hex('#DEADED').bold('Bold gray!'));