vue3 +ts 打包 import * as 导致的问题

vue3 +ts 使用vite 打包时 有组件无法显示

打包时有上面的警告报错，没有在意，导致组件显示的时候，有如下组件顶部标题无法正常显示。

上部分红色部分无法正常显示。显示效果如下。

经过排查：
是在代码中引入js时，

采用了 import * as dayjs from "dayjs"时候的问题，

正确用法是直接 import dayjs from “dayjs”;

这里问题得到解决，原因是 这个dayjs 并不是在ts语法先导入 对象和导入数据类型的的基本使用方法，这里as 可能导致 语法 为类型断言。

这里重点标记一下。

echarts 打包时应用了 echarts-wordCloud 组件插件，导致报错。

原因是 这个模块是echarts组件是一个生产环境的依赖，vite在打包时不需要将这个包打包到内部代码中，所以需要在vite配置中排除该依赖项。

所以在 vite配种打包时配置排除项：

  build: {
    minify: "terser",
    sourcemap: false, // 不生成 source map
    terserOptions: {
      compress: {
        // 打包时清除 console 和 debug 相关代码
        drop_console: true,
        drop_debugger: true,
      },
    },
    rollupOptions: {
      external: ["echarts/lib/echarts"],
    },
  },

然后index.html外部引入echarts和wroldCloud.js

    <script src="./static/js/echarts5.min.js"></script>
    <script src="./static/js/echarts-wordcloud.js"></script>

打包正常。