mirari / v-viewer

Image viewer component for vue, supports rotation, scale, zoom and so on, based on viewer.js
https://mirari.cc/v-viewer/
MIT License
2.5k stars 295 forks source link

api方式调用本地可以,线上不行报引入方式有问题。 #338

Open Stay-optimistic opened 3 months ago

Stay-optimistic commented 3 months ago

页面代码 import { api as viewerApi } from "v-viewer"
const showImagesInViewer = (url: string)=> { viewerApi({ options: { movable: false, title: false, fullscreen: false, toolbar: false, zoomable: false, navbar: false, transition: false, }, images: [url] }) }

线上报错页面打不开, Named export 'api' not found. The requested module 'v-viewer' is a CommonJS module, which may not support all module.exports as named exports. CommonJS modules can always be imported via the default export, for example using: import pkg from 'v-viewer'; const { api } = pkg;

Stay-optimistic commented 3 months ago

![Uploading WechatIMG228.jpg…]()

mirari commented 3 months ago

你可以按照它的提示改写一下

import viewer from "v-viewer"
const viewerApi = viewer.api
Stay-optimistic commented 3 months ago

报错,类型“typeof VueViewer”上不存在属性“api”。ts-plugin(2339) any 没有可用的快速修复

Stay-optimistic commented 3 months ago

你可以按照它的提示改写一下

import viewer from "v-viewer"
const viewerApi = viewer.api

类型“typeof VueViewer”上不存在属性“api”。ts-plugin(2339) any 没有可用的快速修复

Stay-optimistic commented 3 months ago

你可以按照它的提示改写一下


我项目是这样注册插件 
import { defineNuxtPlugin } from "#app";
import VueViewer from "v-viewer";
import "viewerjs/dist/viewer.css";

export default defineNuxtPlugin((nuxtApp) => { nuxtApp.vueApp.use(VueViewer); });

mirari commented 3 months ago

可以看下是不是引入了错误的入口文件 import { api as viewerApi } from "v-viewer/dist/index.umd.js"

Stay-optimistic commented 3 months ago

可以看下是不是引入了错误的入口文件 import { api as viewerApi } from "v-viewer/dist/index.umd.js"

import { api as viewerApi } from "v-viewer/dist/index.umd.js" 无法找到模块“v-viewer/dist/index.umd.js”的声明文件。“/Users/guanfushang/Desktop/magmai-full-stack/node_modules/.pnpm/v-viewer@3.0.11_vue@3.4.21typescript@5.4.3/node_modules/v-viewer/dist/index.umd.js”隐式拥有 "any" 类型。 如果“v-viewer”包实际公开了此模块,请尝试添加包含 declare module‘v-viewer/dist/index.umd.js'; 的新声明(.d.ts)文件ts-plugin(7016)

mirari commented 3 months ago

类型文件位于v-viewer/types目录下

正常情况下,直接写import就可以获取到类型文件。 在nuxt下用法也没有变化。

https://stackblitz.com/edit/github-7zp2yt-4d8z6b?file=pages%2Findex.vue

这是最简复现例子,可以对照下改动了哪里的配置

Stay-optimistic commented 3 months ago

类型文件位于v-viewer/types目录下

正常情况下,直接写import就可以获取到类型文件。 在nuxt下用法也没有变化。

https://stackblitz.com/edit/github-7zp2yt-4d8z6b?file=pages%2Findex.vue

这是最简复现例子,可以对照下改动了哪里的配置

还是不行 报一样的错,引入方式。 急急

mirari commented 3 months ago

最简例子已经给你了,我这里dev或者build start都正常,无法复现你描述的问题 要么补充信息,要么提供复现例子。只说报错没法定位问题

Stay-optimistic commented 3 months ago

最简例子已经给你了,我这里dev或者build start都正常,无法复现你描述的问题 要么补充信息,要么提供复现例子。只说报错没法定位问题

有其他类似api这样调的写法吗?

mirari commented 3 months ago

https://stackblitz.com/edit/github-7zp2yt-4d8z6b?file=pages%2Findex.vue

我加了一个组件的写法

Zhao-Michael commented 1 month ago

@mirari 我也遇到了相同的问题 你在这个DEMO 项目中执行 pnpm run build 就可以复现了 https://stackblitz.com/edit/github-7zp2yt-4d8z6b?file=pages%2Findex.vue

image

mirari commented 1 month ago

@mirari 我也遇到了相同的问题 你在这个DEMO 项目中执行 pnpm run build 就可以复现了 https://stackblitz.com/edit/github-7zp2yt-4d8z6b?file=pages%2Findex.vue

已复现问题,正在修复,感谢反馈

mirari commented 1 month ago

麻烦更新版本到3.0.16,已修复该问题

Zhao-Michael commented 1 month ago

@mirari It works, thanks a lot~