vuecli3直接importumd规范的js报错,而通过npm安装则不会

作者：黄欣豪972 | 来源：互联网 | 2023-10-12 18:19

1.如何复现用Vue-cli3构建create一个项目，把popper.js放到src目录下，popper.js的规范为umd,代码如下截图

1. 如何复现

用Vue-cli3构建create一个项目，把popper.js放到src目录下，popper.js的规范为umd,代码如下截图

图片描述

然后在App.vue 中引入

1	import Popper from './popper.js'

图片描述

另一种通过npm包安装时

1	npm install popper.js --save

然后在App.vue 中引入

1	import Popper from 'popper.js/dist/umd/popper.js'

这个popper.js文件和上面放在src的js文件是一模一样的,只是位置不同,
但是执行的结果却是不一样的,如下图,能够正常导出
图片描述

这是为什么呢? 同样是import引入,而npm包引入的情况下,this和exports都是空对象{},而直接放到src引入时this和
exports都是undefined导致报错

推荐阅读

require
深入解析Promise：流程与源码实现

本文探讨了异步编程的发展历程，从最初的AJAX异步回调到现代的Promise、Generator+Co以及Async/Await等技术。文章详细分析了Promise的工作原理及其源码实现，帮助开发者更好地理解和使用这一重要工具。 ... [详细]

蜡笔小新 2024-11-22 15:42:30
require
Vue CLI 3 项目中使用 Pre-render SPA Plugin 进行预渲染

页面预渲染适用于主要包含静态内容的页面。对于依赖大量API调用的动态页面，建议采用SSR（服务器端渲染），如Nuxt等框架。更多优化策略可参见：https://github.com/HaoChuan9421/vue-cli3-optimization ... [详细]

蜡笔小新 2024-11-23 22:19:17
install
Vue CLI 基础入门指南

本文详细介绍了 Vue CLI 的基础使用方法，包括环境搭建、项目创建、常见配置及路由管理等内容，适合初学者快速掌握 Vue 开发环境。 ... [详细]

蜡笔小新 2024-11-22 14:48:35
require
如何在Ember.js中使用HBS模板

本文介绍了.hbs文件作为Ember.js项目中的视图层，类似于HTML文件的功能，并详细讲解了如何在Ember.js应用中集成Bootstrap框架及其相关组件的方法。 ... [详细]

蜡笔小新 2024-11-21 18:50:46
require
Vue3中如何提高开发效率

小编给大家分享一下Vue3中如何提高开发效率，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获， ... [详细]

蜡笔小新 2024-11-20 15:33:07
node.js
实践指南：使用Express、Create React App与MongoDB搭建React开发环境

本文详细介绍了如何利用Express、Create React App和MongoDB构建一个高效的React应用开发环境，旨在为开发者提供一套完整的解决方案，包括环境搭建、数据模拟及前后端交互。 ... [详细]

蜡笔小新 2024-11-20 10:05:15
install
在VSCode中集成Prettier与TypeScript的最佳实践

本文详细介绍了如何在VSCode环境中配置Prettier工具以支持TypeScript项目，同时结合ESLint实现代码风格的一致性和自动化格式化。 ... [详细]

蜡笔小新 2024-11-24 17:50:24
const
React中的延迟加载与高级组件模式

本文介绍了如何在React应用中实现延迟加载以提高性能，以及如何利用自定义Hook和高阶组件（HOC）来增强组件功能。通过这些技术，开发者可以构建更加高效和可维护的应用。 ... [详细]

蜡笔小新 2024-11-24 13:26:46
process
利用Node.js实现PSD文件的高效切图

本文介绍了如何通过Node.js及其psd2json模块，快速实现PSD文件的自动化切图过程，以适应项目中频繁的界面更新需求。此方法不仅提高了工作效率，还简化了从设计稿到实际应用的转换流程。 ... [详细]

蜡笔小新 2024-11-22 13:21:24
window
高效的JavaScript异步资源加载解决方案

本文探讨了如何通过异步加载技术处理网页中大型第三方插件的加载问题，避免将大文件打包进主JS文件中导致的加载时间过长，介绍了实现异步加载的具体方法及其优化。 ... [详细]

蜡笔小新 2024-11-19 17:19:15
main
Vue 实战经验与常见问题总结

本文总结了 Vue 开发中的一些常见问题和解决方案，包括全局组件的注册、头像显示、背景图路径问题以及 Sass 公用样式的使用方法。 ... [详细]

蜡笔小新 2024-11-17 18:44:53
header
高效且安全的Token存储策略

本文探讨了在不同场景下如何高效且安全地存储Token，包括使用定时器刷新、数据库存储等方法，并针对个人开发者与第三方服务平台的不同需求提供了具体建议。 ... [详细]

蜡笔小新 2024-11-24 17:02:36
require
在CentOS 7中部署Nginx并配置SSL证书

本文详细介绍了如何在CentOS 7操作系统上安装Nginx服务器，并配置SSL证书以增强网站的安全性。适合初学者和中级用户参考。 ... [详细]

蜡笔小新 2024-11-24 02:18:19
header
使用Python构建网页版图像编辑器

本文详细介绍了一款基于Python开发的网页版图像编辑工具，具备多种图像处理功能，如黑白转换、铅笔素描效果等。 ... [详细]

蜡笔小新 2024-11-23 13:14:41
header
TypeScript数据类型详解

本文详细介绍了TypeScript中的各种数据类型，包括基本类型、数组、元组、枚举、any、void、never以及类型断言，并提供了示例代码及其编译结果。 ... [详细]

蜡笔小新 2024-11-17 19:38:15

黄欣豪972

这个家伙很懒，什么也没留下！

Tags | 热门标签

RankList | 热门文章