如何将tiff.js导入Vue项目实现.tif文件预览并解决相关报错

这个报错是因为tiff.js默认以UMD格式打包时，会把Tiff构造函数挂载到全局window对象上，vue-cli的构建环境和Vetur校验默认不知道这个全局变量存在，也无法识别未显式导入的构造函数，可通过以下两种方案解决：

方案一：全局引入静态资源的解决步骤 #

• 将你本地的tiff.min.js文件放入vue-cli项目的public/static目录下（无static目录可手动新建）
• 打开项目public/index.html，在head标签内添加引入代码：

<script src="%PUBLIC_URL%/static/tiff.min.js"></script>

• 两种方式解决找不到Tiff的问题：
  1. 直接调用全局挂载的实例，把组件中new Tiff({buffer: buffer})改为new window.Tiff({buffer: buffer})
  2. 配置webpack externals避免打包检测：打开vue.config.js（无该文件可在根目录新建），添加如下配置：

  module.exports = {
    configureWebpack: {
      externals: {
        'tiff': 'Tiff'
      }
    }
  }
  

  配置完成后在组件顶部显式导入即可：import Tiff from 'tiff'
• 若Vetur仍报类型错误，可在src目录下新建global.d.ts类型声明文件，添加内容：

declare var Tiff: any;

重启编辑器后校验报错即可消失。

方案二：npm包按需引入（更推荐） #

直接使用npm管理依赖，无需手动管理静态资源：

• 执行安装命令：

npm install tiff.js --save

• 在需要使用的组件顶部直接导入即可：

import Tiff from 'tiff.js'

额外优化建议 #

你代码中使用jQuery操作DOM的写法不符合Vue规范，可替换为ref操作：

1. 模板部分添加ref标识：

<div ref="output"></div>

2. 替换DOM操作代码：

// 原代码 $('#output').empty().append(canvas);
this.$refs.output.innerHTML = ''
this.$refs.output.appendChild(canvas)

无需额外引入jQuery，减少项目依赖体积。

内容的提问来源于stack exchange，提问作者DRoseGao