H5引入vant报错和样式失效

最新推荐文章于 2023-09-15 18:23:23 发布

原创最新推荐文章于 2023-09-15 18:23:23 发布 · 4.7k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端

本文探讨了vant库在Vue项目中引入时的错误，着重于解决UncaughtTypeError，以及如何调整引入顺序确保正常工作。同时，揭示了vant组件样式失效的常见陷阱，如正确包裹元素的重要性。通过实例和在线资源，提供了解决方案和前端开发者的实用建议。

1.vant引入报错（Uncaught TypeError: Cannot read properties of undefined (reading 'prototype')）

原因：vant引入顺序在vue引入前

修改顺序后可正常使用

2.vant组件样式失效

首先检查是否引入了vant样式，确认路径

引入样式后 vant标签写在body里但没有<div>包裹样式会失效（避坑点）

如图样式失效

放到<div>里面样式恢复

在线引入下载vue和vant

<script src="https://cdn.jsdelivr.net/npm/vue@next"></script>

<script src="https://cdn.jsdelivr.net/npm/vant@next/lib/vant.min.js"></script>

在线样式

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vant@next/lib/index.css"/>

也打开链接

vue

https://cdn.jsdelivr.net/npm/vue@next

vant

https://cdn.jsdelivr.net/npm/vant@next/lib/vant.min.js

vant样式

https://cdn.jsdelivr.net/npm/vant@next/lib/index.css

然后Ctrl+s 保存本地

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

方磊Nine

关注关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

vue中引入vant使用实列

前端程序猿的博客

01-24

880

vue使用vant，详细代码加注释。

TypeError: Cannot read properties of undefined (reading ‘state‘)

热门推荐

cjhxydream的博客

08-10

3万+

Cannot read properties of undefined

参与评论您还未登录，请先登录后发表或查看评论

vant.min.js/css

06-12

把vant的css和js文件导入html项目，可以在html页面引用vant组件，避免使用连接访问的难以维护的麻烦。

一些CND链接地址

qq_37932625的博客

09-25

867

Vant组件样式没有生效

Ljm_的博客

12-28

6602

昨天在学习Vant组件库的时候遇到一个问题；我在main.js中引入了vant，也注册到了Vue中；因为我使用的是自动按需导入, 那么就要配置babel.config.js, 如图; 但是在运行的时候vant的样式却没有生效, 相当于写了HTML+CSS, 但是CSS却没生效；在网上查阅了相关资料，有人说要在main.js写上import 'vant/lib/index.css', 但是我写上之后还是没有生效，于是在vant的文档里看了下，这是另一种导入的方法，而且也确实没有生效，那么与...

用uni-app 写的app 打包成 h5, 嵌入到另一个 uni-app 的 app 中，h5 向 app 发送消息

03-20

引用[2]指出在原生H5中可以，但在uni-app的H5项目中会报错，甚至导致样式失效。所以可能需要寻找替代方法，或者调整引入方式。另外，引用[1]提到了y_uniwebview插件的安装和使用步骤。这可能是解决方案的一部分，...

小程序跳转H5实现长截图功能；vue-cli3通过rem适配

guairena的博客

08-05

2858

Error:Loading PostCSS Plugin failed: Cannot find module ‘postcss-pxtorem‘报错解决

uniapp代码运行为什么在h5可以正常显示，在小程序就显示不了呢

07-18

例如，H5 使用的是浏览器环境，支持完整的 DOM 操作和 CSS 样式；而小程序使用的是自定义的视图层引擎，对某些 CSS 属性或布局方式支持有限[^1]。 2. **组件兼容性问题** 在某些情况下，特定组件在 H5 端可以正常...

vue3 vantH5项目打包报错✗ Build failed in 7.49s error during build: [vite:esbuild-transpile] Transform failed with 1 error: assets/url-!~{00e}~.js:1430:13: ERROR: The symbol "bem" has already been declared file: assets/url-!~{00e}~.js:1430:13 The symbol "bem" has already been declared 1428| const Radio = withInstall(stdin_default$1); 1429| 1430| const [name, bem] = createNamespace("notify"); | ^ 1431| const popupInheritProps = ["lockScroll", "position", "show", "teleport", "zIndex"]; 1432| const notifyProps = extend$1({}, popupSharedProps, { at failureErrorWithLog (D:\公司文件\aibeauty-H5\node_modules\esbuild\lib\main.js:1467:15) at D:\公司文件\aibeauty-H5\node_modules\esbuild\lib\main.js:736:50 at responseCallbacks.<computed> (D:\公司文件\aibeauty-H5\node_modules\esbuild\lib\main.js:603:9) at handleIncomingPacket (D:\公司文件\aibeauty-H5\node_modules\esbuild\lib\main.js:658:12) at Socket.readFromStdout (D:\公司文件\aibeauty-H5\node_modules\esbuild\lib\main.js:581:7) at Socket.emit (node:events:518:28) at addChunk (node:internal/streams/readable:561:12) at readableAddChunkPushByteMode (node:internal/streams/readable:512:3) at Readable.push (node:internal/streams/readable:392:5) at Pipe.onStreamRead (node:internal/stream_base_commons:189:23)

最新发布

09-12

### 步骤4：检查是否全局引入Vant样式如果在项目中全局引入了Vant的样式，并且同时使用了按需引入，也可能导致问题。确保不要同时使用两种引入方式。例如，避免在main.js中同时引入整个Vant： ```javascript ...

在HBilder中用webview嵌套H5页面，页面用mui框架，去适配鸿蒙时Mui组件功能不能用

03-18

- **替换不兼容组件**：若MUI的触摸事件（如`tap`）失效，改用标准`click`事件或引入`fastclick.js`解决延迟问题。 **3. 沉浸式样式适配** 根据鸿蒙系统状态栏高度动态调整页面布局： ```css .mui-header { ...

Uncaught TypeError: Cannot read properties of undefined (reading ‘prototype‘)

weixin_45966674的博客

06-24

4732

Uncaught TypeError: Cannot read properties of undefined (reading 'prototype')

vue项目引入vant后不生效问题的解决办法

sharleen84的博客

08-13

6344

之前创建项目时，直接使用vue add vant的方式引入，很方便，一键完成安装、引入、配置及使用。但是存在一个问题，就是版本较低，vue官方好像很久没有更新这个vant了。所以决定手动安装引入配置。其次是引入 vant.js import 然后 Vue.use 在main.js中引入。其实也可以用vue add vant的方式一键部署后，再通过更换版本来完成版本更新的。以为这样就完了，结果就是样式不生效。原因就是缺少样式文件的引入。安装后，再启动，就成功了！会自动更换相关的连接。...

关于使用vue过程中警告的问题Cannot read properties of undefined (reading ‘prototype‘)

qq_60619678的博客

06-13

1204

原因是我项目中安装了element-ui相关的依赖以及插件，导致报警告。后续解决办法：将插件以及依赖删除，使用element-plus。

在Vue中引入vant报错（解决办法）

fzxyxf1314的博客

07-19

1万+

第一种方案：一、安装vant

Vant4函数组件样式丢失问题

Xya_a的博客

09-15

732

今天在写项目的时候使用到了showToast组件发现样式丢失了网上冲浪时才发现要导入。例如：import 'vant/es/toast/style';感觉奇奇怪怪的为什么导入。

同时引入vant+vue时出现的小错误--vue必须在vant前引用

weixin_72271537的博客

03-15

444

因为本人之前有写过类似的代码没有发现问题，后经过对照发现同时引入vant+vue时vue必须在vant前引用。改好后代码--vue必须在vant前引用。在引入vant+vue时出现错误。

解决vant组件样式无法显示的问题

weixin_43750611的博客

09-26

6960

vant组件样式无法显示的问题问题：在写vue时使用vant组件时，vant 组件样式无法显示出来原因：因为.vue文件中的style标签内有scoped，表明样式只对本个.vue文件中的template模板标签内的结构有效，引入的第三方vant中的组件是无效的解决方法： 1、定义一个全局的样式文件，例如在src目录中添加一个resetvant.css文件，专门用来存放vant组件中需要修改的样式(便于维护最好使用组件原有的样式类名进行样式修改)。最后在main.js文件中全局引入就可以了。 im

使用uni-app + vant-weapp 发布到H5以及小程序遇到的问题

HWJBJ的博客

01-21

3444

使用uni-app + vant-weapp 发布到H5以及小程序遇到问题记录欢迎使用Markdown编辑器你好！这是你第一次使用 Markdown编辑器所展示的欢迎页。如果你想学习如何使用Markdown编辑器, 可以仔细阅读这篇文章，了解一下Markdown的基本语法知识。新的改变我们对Markdown编辑器进行了一些功能拓展与语法支持，除了标准的Markdown编辑器功能，我们增加了如下几点新功能，帮助你用它写博客：全新的界面设计，将会带来全新的写作体验；在创作中心设置你喜爱的代码

vue 通用样式被导入多次 vant 样式丢失不正常

积极的小可爱~的博客

03-18

2358

问题 1：在看控制台的时候发现通用样式重复导入了 2：vant的样式有问题，好像vant的padding都没了发生原因我配置了通用样式，会自动导入一遍，然后我在app.vue中又导入了一遍，这样已经有重复导入了两遍了，然后配置的@base-color这些数据跟reset.less放在一起，这样导致重复引入第三遍。综上就是为啥看控制台会有那么多次重复引入样式的原因。而vant的样式丢失，看控制台一个个注释样式发现是因为reset.less中的padding:0导致的，注释掉就好了，但是当时一直不

vue3引入vant报错

05-12

要使用 Vant 3.x 版本，需要使用 Vue 3.x 以及对应的 Vue CLI 版本。如果你已经使用了 Vue 3.x 和 Vue CLI 4.x，那么可以按照以下步骤来解决问题： 1. 安装 Vant 3.x： ```bash npm install vant@next -S ``` 2. 在 `main.js` 中引入 Vant： ```javascript import { createApp } from 'vue'; import Vant from 'vant'; import 'vant/lib/index.css'; import App from './App.vue'; const app = createApp(App); app.use(Vant); app.mount('#app'); ``` 3. 在 `babel.config.js` 中添加 Vant 的按需引入配置： ```javascript module.exports = { presets: [ '@vue/cli-plugin-babel/preset' ], plugins: [ [ 'import', { libraryName: 'vant', libraryDirectory: 'es', style: true }, 'vant' ] ] } ``` 如果你使用的是 Vue CLI 3.x，那么需要先升级到 Vue CLI 4.x，然后再按照上述步骤进行操作。如果你还是遇到问题，可以提供更具体的错误信息以便我更好地帮助你解决问题。