错误：找不到模块 VueJS 应用程序的声明文件

Question

您好，我正在使用 NuxtJS 构建一个 VueJS 应用程序。我已经安装了一个图像裁剪库vue-croppie。我已经按照下面的文档导入了 Vue 组件

import VueCroppie from 'vue-croppie'

但是，我在导入语句中收到以下错误

找不到模块“vue-croppie”的声明文件。 'xxx/node_modules/vue-croppie/dist/vue-croppie.cjs.js' 隐含了一个 'any' 类型。 尝试npm i --save-dev @types/vue-croppie（如果存在）或添加一个包含 `declare module 'vue-croppie' 的新声明 (.d.ts) 文件；

我尝试在项目的根目录下声明index.d.ts 文件，内容如下，但 id 并不能解决问题

declare module 'vue-croppie';

我已经尝试使用require，就像其他帖子中建议的那样，但没有用

const VueCroppie = require('vue-croppie')

我知道这是一个打字稿问题，但对打字稿一无所知。有人可以对此进行更多说明。发生了什么以及如何解决。

谢谢

Answer 1

问题是我没有使用 VueJS 应用程序安装插件。这是怎么做的。

VueJS

我们可以使用Vue.use 来安装插件，然后才能像下面这样使用它

import Vue from 'vue';
import VueCroppie from 'vue-croppie';

Vue.use(VueCroppie)

NuxtJS

在 NuxtJS 的情况下，情况略有不同。该插件是全局注册的，方法如下。

1. 在插件文件夹下创建一个名为vue-croppie.js 的文件。并添加以下内容

   import Vue from 'vue'
   import VueCroppie from 'vue-croppie'
   
   Vue.use(VueCroppie)
   

2. 在你的 nuxt.config.js 中添加这个插件

{ src: '~/plugins/vue-croppie.js', ssr: false }

现在，该插件将在全球范围内可用。所以无需导入，直接使用即可。