vue3项目导入ansi_up报错

前言

也是最近在研究项目里滚动输出log的功能时了解到这个插件的。

简介

ansi_up是一个轻量级JavaScript库，专为将含有ANSI颜色转义码的文本转换成HTML而设计。无论在浏览器还是Node.js环境中，它都能无缝运行。这个模块以单个ES6 JavaScript文件的形式提供，无任何依赖，并且自2011年起已在生产环境稳定使用。

安装

npm i ansi_up

在页面中导入

import { AnsiUp } from 'ansi_up';

使用

<template>
  {{ showText }}
</template>

<script setup>

import { AnsiUp } from 'ansi_up';

const ansiUp = new AnsiUp();
const ansiText = '\x1B[31mHello\x1B[0m'; 
const showText = ansiUp.ansi_to_html(ansiText);

</script>

总结

之所以记录这个是因为上网搜到的几个答案都是通过import ansi_up from 'ansi_up';导入的，可能是插件版本不同？总之我的代码里一直报错，后来去看插件的源码发现它的导出方式是export declare class AnsiUp {}  ，不是export default导出的，所以正确的引入方式应该是我本篇记录的，如果有遇到类似的问题的，也可以看下自己安装的插件的源码，或许情况各不一样吧。