vite + chalk打印输出彩色命令行-EW帮帮网

起源：

看到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.log

export 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.bgBlue
  const infoChalk = chalk.white.bgGreen
  log(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!'));

完结，撒花~

应该是实现了基本实现了自己的起源需求了。喜欢的朋友点个大拇指赞，谢谢~！

有觉得我做的不够好的地方或者表达不严谨的，欢迎留言或者私信~

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

起源：

实现：