vue3.0 webpack&vite配置不解析特定元素标签

最新推荐文章于 2024-08-01 03:56:08 发布
最新推荐文章于 2024-08-01 03:56:08 发布
阅读量2k 收藏 1
点赞数 3
分类专栏： 前端 文章标签： vue javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41777791/article/details/118227491
版权
在Vue3.0中，当遇到未在components注册的自定义标签，编译器会报错。为避免此问题，需要在Vite或Webpack配置中使用`isCustomElement`来指定不解析的自定义元素。
摘要由CSDN通过智能技术生成

vue3.0 webpack & vite 配置不解析特定元素标签 (isCustomElement)

自定义标签如果不是 vue components里面注册的组件，vue compiler 编译器在解析的时候会抛出错误提示，如果不想让编译器解析这个自定义标签，需要在webpack或者vite里面将自定义元素的规则传递到webpack或者vite的编译选项中。

1. vite

export default defineConfig({
   
  plugins: [vue({
   
    template:{
   
      compilerOptions:{
最低0.47元/天 解锁文章
peterCZG
关注
专栏目录
vite+vue3+ssg+js打包时遇到的问题及解决
cyj0919的博客
03-06 2214
我在其中使用了vue3-video-play报错 window is not defined 更换插件为video.js报错解决。isClient可以判断是否是客户端，在这里面使用window和document不会报错。打包过程中会遇到个别插件或者包中含有window报错 可以试着更换插件。如上图所示 可以在使用之前进行判断。在package.json。
vite配置isCustomElement
漫漫L路的博客
11-01 5706
配置isCustomElement是为了支持原生自定义元素。如果自定义的标签不是vue组件的话，编译器在解析的时候会抛出错误提示。需要做以下配置。 vite.config.js export default defineConfig({ plugins: [vue({ template:{ // 添加以下内容 compilerOptions:{ isCustomElement: tag => tag.startsWith('ion-')
用v-html解决Vue.js渲染中html标签不被解析的问题
01-19
前言 最近在工作中遇到一个问题，在网页中后台传来的json数据中包含html标签，将该json数据绑定到Vue.js中对象中，对该对象进行for循环，发现数据中的html标签不能被解析，而是当作字符显示出来。 问题如下所示： 解决方法： Vue.js中提供了v-html这个指令来解决这个问题，或者对数据对象使用{{{vm.data}}}三个大括号来包裹对象，就可以正常解析了。 代码改动如下： 总结 以上就是这篇文章的全部内容了，希望本文的内容对大家都 学习或者工作能带来一定的帮助，如果有疑问大家可以留言交流。
Vue3 学习笔记（进阶_十五）——Webpack与Vite构建工具
最新发布
weixin_41279890的博客
08-01 19
一、概念1、为什么需要构建工具  在传统的大型项目前端开发中，每次加载网页需要请求上百上千个文件js、css文件，产生大量不必要的网络交互。构建工具的出现解决了这个问题，构建工具会自动的把js或css文件合并成一个或多个文件，获得最佳的加载性能。还能将代码进行 tree-shaking、懒加载和 chunk 分割（以获得更...
vue.js打包之后，带参数的路由无法解析
如需咨询可联系我，V：chen2318341674
01-27 936
vue项目做完后，未打包的时候一切正常，npm run build打包部署到服务器后却发现，带参数的路由都无法解析，出现如下界面： 试了很多在百度的办法： 1：修改config/index.js文件assetsPublicPath； 2：修改路由模式，加上/删除 mode: ‘history’ 这句话； 3：修改跳转链接的方式； … 总之都试遍了还是不行； 最后的解决方案如下： 修改Nginx部署的配置，跟传统一样配置好之后，　增加 try_files $uri $uri/ /index.html; 这
Vue 忽略自定义标签名&插件开发&组件数据传递和共享—＞父传子
m0_62168050的博客
09-15 982
Vue 忽略自定义标签名&插件开发&组件数据传递和共享—>父传子
webpack&vite 前端构建工具源码
05-04
Vite由Vue.js作者尤雨溪创建，旨在解决Webpack在开发模式下的启动速度问题。Vite的特点在于： 1. **即时重载（Hot Module Replacement，HMR）**：Vite在开发模式下利用ES模块的动态导入特性，实现快速热更新，无需...
Vue3.0+vite vite.config.ts配置与env
qq_42396791的博客
03-15 1408
【代码】Vue3.0 vite.config.ts配置。
Vite2+Vue3学习笔记（一）：Vue3.0项目搭建及配置过程
老司机的后备箱
08-19 628
主题 | Element Plus/* 只需要重写你需要的即可 */);// 如果只是按需导入，则可以忽略以下内容。// 如果你想导入所有样式:【必需】注意：一定要在element-plus的index.css后面引入，否则自定义样式文件不会生效。// 引入Element Plus// 引入自定义样式文件。
若依vue3,基于webpack(非vite版本)
01-02
Webpack的主要任务包括：模块解析、加载、编译和打包。它支持预处理器（如Sass/LESS for CSS）和后处理器（如Autoprefixer），以及Tree Shaking来减小生产环境的代码体积。 3. **Vue.js与Webpack的结合**：Vue CLI...
如何让html标签在vue中不被解析的显示在html页面上
热门推荐
ForMyQianDuan的博客
05-23 1万+
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8&amp
vue3常见错误及解决办法全解析
L1ke_one的博客
03-23 4967
1. 错误位置： 错误原因： 第24行5列出现错误，缺少>符号 2. 报错位置： 报错原因： 在代码31行6列中缺少结束标签 3. 在代码65行2列中 onMounted未定义，说明onMounted没有引用，也有可能单词写错 4. 在代码5行3列出，有多余空格，一般只在严格模式中会展示此错误 使用ctrl+K格式化文档就可以解决该错误。 5. 在代码第10行的19-57个字符中存在错误 错误原因：模块找不到，不能resolve 解决办法：检查...
【转载】vue3 使用 ＜micro-app＞ 存在 isCustomElement 警告
qq_33422122的博客
07-05 838
2、vite.config 配置。由于使用的是 jsx，你需要在。
解决：xxxx If this is a native custom element, make sure to exclude it from component resolution
记录开发日常
04-23 3849
这种报错通常是因为在 `Vue.js` 应用程序中使用了自定义组件，但是在编译选项中没有将其排除在组件解析之外。
Web Components 系列（二）—— 关于 Custom Elements
编程三昧
02-08 919
Web Components 标准非常重要的一个特性是，它使开发者能够将 HTML 页面的功能封装为 custom elements（自定义标签），而往常，开发者不得不写一大堆冗长、深层嵌套的标签来实现同样的页面功能。
vue3 + vite 动态引入不被打包的静态资源
listener_life的博客
05-30 2659
vue3 + vite 动态引入不被打包的静态资源
Vue3报错：Failed to resolve component: Refresh If this is a native custom element, make sure to exclude
m0_60820509的博客
09-25 2798
自定义组件父子组件通信报错：Failed to resolve component: refresh if this is a native custom element, make sure to exclude it from component resolution via compileroptions.iscustomelement.
Vue3.0快速入门与实践：vite替代Webpack与组合式API详解
1. Vite的替代：Vue3.0引入了Vite作为新的构建工具，它不再像Webpack那样需要预先打包所有文件。Vite提供了零配置的快速冷启动、即时热模块替换（HMR）以及按需编译的优势，这使得开发流程更加高效，尤其是在处理...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值