[已解决-],自己封装的npm包在开发环境可以显示 在生产环境没有解析

最新推荐文章于 2024-10-12 01:06:58 发布
最新推荐文章于 2024-10-12 01:06:58 发布
阅读量678 收藏
点赞数 1
分类专栏： vue 文章标签： npm 组件不解析
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_29819449/article/details/121616033
版权
博客主要讨论了在开发环境和生产环境中，组件的name属性出现差异的问题。在开发环境下，Component.name为完整的class名，而打包后在生产环境中变为简写。解决方案是在封装的组件内部定义并使用component.options.name来确保获取正确的组件名称。
摘要由CSDN通过智能技术生成

1.开发环境

 生产环境

 哪位大佬救救我,怎么解决这个问题??

---------------------------现将问题原因和解决方法奉上;

1.问题原因 :在开发环境时候获取到的Component.name是组件class名;但是打包之后生产的name就变成简写了 变成了"n";

 2解决办法:

在我们封装的组件里面重新自定义一个name值

然后这里取值一定要去取component.options.name 而不是最开始的component.name

 即可解决....................

 

玉林路扛把子
关注
专栏目录
Node.js-Nodorithm-提供一些常用算法封装的NPM包
08-10
Nodorithm是一个专门针对Node.js环境设计的NPM（Node Package Manager）包，它封装了一系列常用的算法，便于开发者在项目中快速、便捷地应用这些算法。 1. **NPM包的使用** - 安装：要在Node.js项目中使用...
address-book-npm
03-08
"address-book-npm" 是一个基于JavaScript的项目，主要关注于实现一个地址簿功能，它...以上是对"address-book-npm"项目的可能实现方式和涉及的技术栈的详细解析，具体实现会根据项目需求和开发团队的选择有所不同。
Vue-引用组件，不显示
sam80000的博客
08-11 2971
无
[Vue warn]: You are using the runtime-only build of Vue 牵扯到Vue runtime-compiler与runtime-only区别
YUSIR 完美CODING世界
02-24 553
[Vue warn]:You are using the runtime-only build of Vue where the template compiler is not available. Either pre-compile the templates into render functions, or use the compiler-included build. 1. Vue的编译渲染过程 template --> ast --> render函数 --> VDo.
vue引用自定义组件失败 自定义组件名为map
大雾起了清晨
05-15 661
将一个自定义组件定义为map以后页面不显示 import map from './map.vue' 下面使用组件模板中 components: { bread, quillEditor, map }, 页面中使用的是 <map></map> 页面上一直不显示，后来审查了一下页面发现是 ！！！！！！！！！！！！ 纠结了好久，突然想起可能是不是组件命名不能是这个啊，试了一下
#vue3#在自定义组件中使用v-model，dev环境不报错，prod环境报错
老衲的少女心i~
09-21 624
vue组件封装遇到的问题总结
解决Vue项目中的路径解析错误（Cannot resolve directory ‘@’）
weixin_53955862的博客
04-06 2660
在Vue项目中，您可能会遇到路径解析错误，例如“Cannot resolve directory ‘@’”。这个错误通常发生在尝试解析一个依赖或模块时，但由于路径配置不正确，导致无法找到对应的文件。这是解决js路径解析的方法，我们导入的是css。
vue 之＜component :is=‘name‘/＞ 动态渲染组件使用详解
weixin_47373981的博客
02-20 489
使用vue中的component 实现多个组件来回切换。需要引入的组件，例如：myhome.vue。
4. webpack 生产环境的基本配置
小丕的博客
03-13 1602
第 4 章：webpack 生产环境的基本配置 开发环境： 源代码 -> webpack+自动化 -> bundle 开发环境中：比如 1. css -> loader -> js ； css经过loader加载会加入到js代码中；会使js代码体积变大；由于先加载js后再插入style标签，会存在闪现现象； .... 生产环境中： 以下操作放在开发环境的话会拖慢开发环境的构建速度，即打包速度较慢，影响开发效率； 4.1 提取 css 成单独文件 1. 下载安装包 2
materialize-sass:打包实现在npm上分发的实现源-Source material
03-24
在实际使用中，开发者可以在自己的Sass文件中通过`@import`指令引入Materialize-Sass，然后根据需要自定义主题颜色、调整布局等。由于Sass支持变量和函数，因此可以轻松地覆盖Materialize的默认设置，创建符合项目...
geodesic:node.js npm的开发环境即服务（DEaaS）
05-05
测地线（Geodesic）是一种基于Node.js和npm（Node Package Manager）的开发环境即服务（Development Environment as a Service，简称DEaaS）解决方案。这个项目旨在提供一个云原生的环境，使得开发者能够在任何地方...
Nodejs 发布自己的npm包并制作成命令行工具的实例讲解
10-18
这可以通过在命令行中执行`npm install <包名>`来快速判断。如果安装命令报错，说明没有重名包，可以继续使用该包名。接着，使用`npm init`命令开始创建npm包的骨架。这个命令会提示用户输入一系列的信息，包括包的...
开发环境正常，Vite打包生产环境报错
CSDN_Sviexu的博客
11-03 1156
vite打包错误
vue中引用element组件无法使用
Fairy_Jun的博客
10-30 1621
我在项目中引用了element组件，但是显示效果没有出来，后来发现使用在main.js中引用了 lib-flexible插件，px2rem将px像素转换成了rem，导致无法显示其效果。 解决方法： 1、将main.js中引用的 lib-flexible插件代码删除 2、需要打开vue.config.js中的css部分代码删除 3、重启软件，打开就可以看到element应有的代码样式 ...
ts项目 test，production环境打包无法解析“?.”的踩坑记录
qq_54714968的博客
06-10 498
ts项目 test，production环境打包无法解析“?.”的踩坑记录
npm- 开发与生产环境
weixin_34210740的博客
08-15 922
npm npm 是javascript 包管理，也是世界上最大的软件记录。 使用npm 可以安装，分享和贡献自己的代码，管理项目中的依赖包， package.json npm的包依赖配置json文件，开发时可以在里面记录所有依赖包，也可以配置一些简单的npm 脚本， { "name": "xxxxxx", "version": "...
Vue之 打包项目生产环境中请求接口报错404
热门推荐
qq_39835505的博客
11-15 1万+
打包流程 https://blog.csdn.net/qq_36538012/article/details/107356270 404 解决 https://blog.csdn.net/qq_34535116/article/details/120155149 问题 1 部署项目之后，浏览器空白页，报错如下： 解决 正常vue项目是要修改 config文件夹下的index.js 可是vue-element-admin项目没有这个文件 那就找到并且打开vue.config.js 将 publicPath
使用 nrm 管理 npm 镜像源
最新发布
读心悦
10-12 446
如果你有一个自定义的 npm 源，你可以使用nrm add命令来添加它。将替换为你想要给这个源起的名称，将替换为源的 URL。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

玉林路扛把子

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值