首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

为什么webpack不能加载从vue组件导入的*.js类?

Webpack不能加载从Vue组件导入的.js类的原因是因为Vue组件的.js文件中使用了ES6的模块语法,而Webpack默认只能处理CommonJS规范的模块导入。

在Vue组件中,如果使用了ES6的模块语法导入一个*.js类,例如:

代码语言:txt
复制
import MyClass from './myClass.js';

Webpack在处理这个导入语句时会报错,提示无法解析这个模块。

解决这个问题的方法有两种:

  1. 使用Webpack的babel-loader来处理ES6的模块语法。首先,安装babel-loader和相关的Babel插件:
代码语言:txt
复制
npm install babel-loader @babel/core @babel/preset-env --save-dev

然后,在Webpack的配置文件中添加babel-loader的配置:

代码语言:txt
复制
module: {
  rules: [
    {
      test: /\.js$/,
      exclude: /node_modules/,
      use: {
        loader: 'babel-loader',
        options: {
          presets: ['@babel/preset-env']
        }
      }
    }
  ]
}

这样,Webpack在处理*.js文件时会使用babel-loader来转译ES6的模块语法,使其能够被正确加载。

  1. 将Vue组件中的导入语句改为使用CommonJS规范的导入方式:
代码语言:txt
复制
const MyClass = require('./myClass.js');

这样,Webpack就能够正确加载Vue组件中导入的*.js类。

总结起来,Webpack不能加载从Vue组件导入的*.js类是因为默认只能处理CommonJS规范的模块导入,可以通过使用babel-loader来处理ES6的模块语法,或者将导入语句改为使用CommonJS规范的导入方式来解决这个问题。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

如何构建你的第一个 Vue.js 组件

在本教程中,我们将构建一个星级评分系统组件。我们将在需要时介绍几个 Vue.js 概念,并介绍为什么要使用它们。...这是因为Webpack的vue-loader带有一个热加载功能。与实时重新加载或浏览器同步相反,每次更改文件时,热重新加载都不会刷新页面。而是监视组件更改,只刷新它们,保持状态不变。...块中的前两行分别导入图标,所以最终捆绑包中不需要图标。第三个图标是从 vue-awesome 导入的 Icon 组件,所以你可以在你的项目中使用它。...Vue.js 使得从简单的 CSS 切换到您最喜欢的预处理器变得轻而易举。你所需要的只是适当的 Webpack 加载器和块上的简单属性。...Vue.js 会编译好你的组件并创建合适的绑定。 这也是为什么您可以从模板访问组件的上下文的原因:因为指令绑定到视图模型。与具有单独 HTML 的传统项目相反,模板是组件的组成部分。

2.5K50

Vue webpack 压缩打包上线 首屏加载时间过长 优化方案

Vue 上线优化方案 #1 为什么要引入外部CDN 最近博客上线,但是在首次加载的时候,需要消耗很多时间,大概在50秒左右,就是说第一页登录页面,就需要用户等待50秒(服务器是最低配置也是一个原因),看了一下...懒加载 webpack默认将所有js源代码打包成一个js文件,导致JS包会变得非常大,影响页面首次加载速度 按需加载能把不同路由对应的组件分割成不同的代码块,然后当路由被访问的时候才加载对应组件的js...,优化后,使用箭头函数,将组件导入,而不是在文件开头,将所有的组件一次全部倒入,一次全部倒入会导致加载时间长,对用户体验不友好 #2.3 引入外部CDN CDN是构建在网络之上的内容分发网络,依靠部署在各地的边缘服务器.../other_ui/element/index' // Vue.use(ViewUI); // Vue.use(element); store/index.js 去掉Vuex的npm导入方式 //...去掉axios的npm导入方式 // import axios from 'axios' router/index.js 去掉vue-router的npm导入方式 // import Vue

1.8K30
  • Vue 08.webpack中使用.vue组件

    手动安装 VueRouter Vue.use(VueRouter) 导入需要展示的组件(main.js) import app from '....'vue'; import MintUI from 'mint-ui'; 导入样式表 import 'mint-ui/lib/style.css' // 注意配置webpack.config.js中样式加载器...安装 babel-plugin-component npm install babel-plugin-component -D 配置webpack.config.js的加载器 module: {...; 而 Mint-UI,是真正的组件库,是使用 Vue 技术封装出来的 成套的组件,可以无缝的和 VUE项目进行集成开发; 因此,从体验上来说, Mint-UI体验更好,因为这是别人帮我们开发好的现成的...Vue组件; 从体验上来说, MUI和Bootstrap类似; 理论上,任何项目都可以使用 MUI 或 Bootstrap,但是,MInt-UI只适用于Vue项目; 注意:不能使用npm下载,需要从

    1.1K10

    前端工程化(ES6模块化和webpack打包,配置Vue组件加载器和发布项目)

    传统Vue组件的缺陷 全局定义的组件不能重名,字符串模板缺乏语法高亮,不支持css(当html和js组件化时,css没有参与其中) 没有构建步骤限制,只能使用H5和ES5,不能使用预处理器(babel...) 解决方案 /* 使用Vue单文件组件,每个单文件组件的后缀名都是.vue 每一个Vue单文件组件都由三部分组成 1).template 组件组成的模板区域...js代码区域 样式代码区域 安装Vetur插件可以使得.vue文件中的代码高亮 配置.vue文件的加载器 // A.安装vue...组件的加载器 npm install vue-loader vue-template-compiler -D // B.配置规则:更改webpack.config.js的module中的rules...} ] } } Webpack中使用Vue 想要让vue单文件组件能够使用,我们必须要安装vue并使用vue来引用vue单文件组件。

    2.6K50

    前端成神之路-vue前端工程化

    plugins:[ htmlPlugin ] } 11.webpack中的加载器 通过loader打包非js模块:默认情况下,webpack只能打包js文件,如果想要打包非js文件,需要调用...] } } 12.Vue单文件组件 传统Vue组件的缺陷: 全局定义的组件不能重名,字符串模板缺乏语法高亮,不支持css(当html和js组件化时,css没有参与其中) 没有构建步骤限制,只能使用...H5和ES5,不能使用预处理器(babel) 解决方案: 使用Vue单文件组件,每个单文件组件的后缀名都是.vue 每一个Vue单文件组件都由三部分组成 1).template组件组成的模板区域.../script> 样式代码区域 补充:安装Vetur插件可以使得.vue文件中的代码高亮 配置.vue文件的加载器 A.安装vue组件的加载器...vue-loader”, } ] } } 13.在webpack中使用vue 上一节我们安装处理了vue单文件组件的加载器,想要让vue单文件组件能够使用

    85020

    Vue.js应用性能优化二

    在Vue.js中的延迟加载和代码拆分文章中,我们了解了代码拆分是什么,它如何与Webpack一起工作以及如何在Vue应用程序中使用延迟加载来使用它。...像Vue.js中的其他所有东西一样 - 它非常简单。我们只需要在那里动态导入组件,而不是将组件直接导入到路径对象中。仅当解析给定路线时才会下载路线组件。 所以不要像这样静态导入路径组件: ?...通过此设置,webpack将创建三个包: app.js - 我们的主要包含应用程序入口点(main.js)和每个路由所需的库/组件 home.js - home页面bundle,只有在输入/路径时才会下载...Vendor bundle 反模式 vendor包(第三方类库)通常用于包含node_modules中所有模块的单独js文件的上下文中。...在下一部分中,我们将了解所有其他小部件(Vuex存储和单个组件),这些部件也可以从主bundle中减掉并且懒加载。

    2K30

    Vue.js中的延迟加载和代码拆分

    我的目标是让这个系列成为关于Vue应用程序性能的全面而完整的指南。 Webpack bundling 打包机制 本系列中的大多数技巧都将集中在如何使我们的JS包更小。...现在是时候看看我们如何在我们自己的Vue.js应用程序中使用延迟加载。 动态导入 我们可以使用webpack的动态导入,轻松地加载我们应用程序的某些部分。...换句话说,我们只是为依赖图创建某种新的入口点。 ? 延迟加载Vue components 现在我们知道延迟加载是什么,以及为什么需要它。现在是时候看看我们如何在Vue应用程序中使用它了。...以下是调用Vue组件动态加载的最常用方法: 调用包含导入的函数 ? 渲染组件 ? 请注意,仅当请求的组件在模板中渲染时,才会调用lazyComponent函数。例如这段代码: ?...我们已经学习了如何使用Vue组件进行延迟加载。 在本系列的下一部分中,我将向您展示在任何Vue.js应用程序上获得显着性能提升的最有用(也是最快)的方法。

    7.8K10

    为 Vue 的惰性加载加一个进度条

    借助 Webpack,可以用 import() 函数而不是 import 关键字在 Vue.js 中按需加载页面。 为什么要按需加载?...首先在 components 目录中创建一个新文件 eventHub.js: import Vue from 'vue' export default new Vue() 然后把 Webpack 配置为禁用预取和预加载.../views/About.vue') }, 如果希望可以选择按需加载某些页面,而不是全局禁用预取和预加载,可以用特殊的 Webpack 注释,不要在 vue.config.js 中配置 Webpack...不过可以创建一个进度条,并使它在页面加载时完成。 由于不能真正反映进度,所以描绘的进度只是进行了随机跳跃。...总结 在本文中,我们禁用了在 Vue 应用中的预取和预加载功能,并创建了一个进度条组件,该组件可显示以模拟加载页面时的实际进度。

    3.3K30

    【技术创作101训练营】三种不同场景下 vue 组件动态加载的方法及实现

    当导入的组件较多时,一个个导入,会比较繁琐。...【方式2】使用 vue 的动态&异步组件实现了懒加载,但需要显式地指定所有需要加载的组件,幸运的是,webpack 提供了 require.context 的 api 供开发者动态导入模块,这样开发者甚至可以根据接口返回动态地加载组件...文档,vue-loader文档地址,需要配置 webpack.config.js { test: /\.vue$/, loader: 'vue-loader' } 构建的组件的使用 <!...myLib [entry] 4.3 导入动态组件脚本文件 经过打包的组件可以生成 js 脚本文件或 lib 库文件,可以根据接口等方式的返回结果,通过 script 或 import 的方式引入,见...; (2) webpack 的 require.context 方式支持用正则表达式的方式异步导入组件,适合导入多个文件名满足一定规律的组件,并且支持从接口等方式,根据返回结果异步加载组件,但是仍然需要和主程序一起打包

    2.9K2017

    Vue 脱坑记 - 查漏补缺(汇总下群里高频询问的xxx及给出不靠谱的解决方案)

    $set(obj,item,value); 传送门:数组更新检测(触发视图更新) ---- Q:为什么我的组件间的样式不能继承或者覆写啊!!!...也就是scoped(vue-cli 里面配置了,只要加入这个属性就自动启用) 复制代码 为什么不能继承或者覆写呢,那时因为每个类或者...里面的; 文件名: build -> webpack.base.conf.js resolve: { extensions: [".js", ".vue", ".json"], // 可以导入的时候忽略的拓展名范围...alias: { vue$: "vue/dist/vue.esm.js", "@": resolve("src"), // 这里就是别名了,比如@就代表直接从/src...常规压缩js,css, 愿意折腾的还可以引入 dll 这些 路由组件采用懒加载 加入路由过渡和加载等待效果,虽然不能解决根本,但起码让人等的舒心一点不是么!!!

    5.1K30

    探索 模块打包 exports和require 与 export和import 的用法和区别

    /api/module/es6_export.js'   ES6 Module的导入、导出语句都是声明式,它不支持导入的路径是一个表达式,并且导入、导出语句必须位于模块的顶层作用域(比如不能放在if语句中...比如,在引入工具类库时,工程中往往只用到了其中一部分组件或接口,但有可能会将其代码完整地加载进来。未被调用到的模块代码永远不会被执行,也就成为了冗余代码。...对模块加载的实现,在浏览器中可以通过调用__webpack_require__(moduleId)来完成模块导入。 modules对象。...加载入口模块。每个bundle都有且只有一个入口模块,在上面的示例中,PageModule.vue是入口模块,在浏览器中会从它开始执行。 执行模块代码。...不难看出,第3步和第4步时一个递归的过程,Webpack为每个模块创造了一个可以导出和导入模块的环境,但本质上并没有修改代码的执行逻辑,因此代码执行的顺序于模块加载的顺序时完全一致的,这就时Webpack

    1.8K10

    webpack+vue项目实战(三,配置功能操作页和组件的按需加载)

    1.前言 上篇文章(webpack+vue项目实战(二,开发管理系统主页面)),实现了,侧边栏的一个操作,点击侧边栏的一些操作,最重要的就是路由的切换。...4.按需加载 大家有没有想到这个问题。比如,一开始访问,只显示和输出了'首页'的的组件(welcome.vue)。但是实际上,'回款管理'和'开票管理'的组件文件也是加载了。...但是,如果以后需要引进100个,1000个组件文件呢!这下index.js的大小无法预估!。所以下面引用按需加载来处理。写法没有什么区别 ? 然后查看结果。...是不是小很多了,然后invoiceList.js和cashList.js是按需加载的,就是需要的时候才加载。这样至少在体验上是更好了!...相关资料 路由懒加载,异步组件,代码分离 5.未完待续 今天,到此为止了。今天主要是利用vue-router实现了在单页面不同的组件切换的一个功能,以及element-ui的简单应用!

    87020

    如何在2021年编写网络应用程序?

    首先,让我们从Webpack本身及其CLI界面开始 $ npm install webpack webpack-cli 然后,我们需要使用其编译器添加处理Vue文件的插件 $ npm install vue-loader...Views 让我们从创建一个新视图开始。这将是主页,所以我将其称为文件Home.vue。 我在文件名中使用了大写字母,以表明它是Java等其他OOP语言中的类。...vuetify未定义) 您的应用程序和Vuetify没有导入“相同”的Vue。如上所述,导入适合您的用法的Vue非常重要。一个好的解决方案是在webpack中创建一个别名。...常见问题 使用它们时,为什么不需要导入每个Vuetify组件?...当我们执行操作Vue.use(Vuetify);在index.js中,它将在整个项目中将其激活。使用它们时,可能仅导入Vuetify组件。但这需要做一些超出本教程范围的工作。

    10.9K20

    分享 60 个 关于 Vue 的常见问题汇总及解决方案

    ,对于小于多少 K 以下的图片(规定的格式)直接转为 base64格式渲染; 具体配置在webpack.base.conf.js里面的rules里面的 url-loader,这样做的好处:在网速不好的时候先于内容加载和减少...$set(obj,item,value); Q13:为什么我的组件间的样式不能继承或者覆写啊! 单组件开发模式下,请确认是否开启了 css模块化功能!... 为什么不能继承或者覆写呢,那时因为每个类或者 id 乃至标签都会给自动在css后面添加hash!....js", ".vue", ".json"], // 可以导入的时候忽略的拓展名范围 alias: { vue$: "vue/dist/vue.esm.js", "@...若是引入moment这些,webpack 排除国际化语言包。 webpack 常规压缩js,css, 愿意折腾的还可以引入 dll 这些。 路由组件采用懒加载。

    60230

    【Vue_05】前端工程化

    一、ES6的模块化 1. ES6模块化规范 每个 js 文件都是一个独立的模块 导入模块成员使用 import 关键字 暴露模块成员使用 export 关键字 2....Webpack 可以从终端、或是更改 webpack.config.js 来设置各项功能。 要使用 Webpack 前须先安装 Node.js。 ? 2. webpack的基本使用 ?.../dist"), //设置文件名 filename:"main.js" } } 三、 webpack中的加载器 1....什么是 vue 单文件组件 Vue单文件组件每个单文件组件的后缀名都是.vue 优化了传统全局组件的一些弊端(模板缺乏高亮、没有 css 等) 每一个Vue单文件组件都由template、script...配置 vue 单文件组件加载器 // 安装 vue 组件的加载器 npm install vue-loader vue-template-compiler -D // 配置规则:更改 webpack.config.js

    54210

    微前端架构实战

    image-20210420104426857.png 从 Micro Frontends 官网可以了解到,微前端概念是从微服务概念扩展而来的,摒弃大型单体方式,将前端整体分解为小而简单的块,这些块可以独立开发...增量升级 迁移是一项非常耗时且艰难的任务,比如有一个管理系统使用 AngularJS 开发维护已经有三年时间,但是随时间的推移和团队成员的变更,无论从开发成本还是用人需求上,AngularJS 已经不能满足要求...在使用了微前端架构后,可以将不能的功能模块拆分成独立的应用,此时功能模块就可以单独构建单独发布了,构建时间也会变得非常快,应用发布后不需要更改其他内容应用就会自动更新,这意味着你可以进行频繁的构建发布操作了...案例:通过 webpack 将 react 应用打包为 systemjs 模块,在通过 systemjs 在浏览器中加载模块 npm install webpack@5.17.0 webpack-cli...> import { defineAsyncComponent } from "vue"; // 导入模块联邦组件 const User = defineAsyncComponent(() => import

    3.9K00

    VueJS 开发常见问题集锦

    此外,模块定义变量或函数时即便使用 let 而不是 const,在导入使用时都会变成只读,不能重新赋值,效果等同于用 const 声明。...在 webpack 的生产配置文件中的 plugins 字段中添加一个插件,使用内置的方法类 ContextReplacementPlugin 过滤掉 Moment.js 中那些用不到的语言包: 解决方案采自...自定义路径别名   可能有些人注意到了,在 vue-cli 生成的模板中在导入组件时使用了这样的语法:   这个 @ 是什么东西?...我们可以这样: 但是,在遍历数字的时候需要注意,数字的 value 是从 1 开始,而 key 是从 0 开始: 2.2.0+ 的版本里,当在组件中使用 v-for 时,key 现在是必须的。...为解决这个问题,Vue.js 中提供了 $set() 方法: 对象 受现代 JavaScript 的限制(以及废弃 Object.observe),Vue 不能检测到对象属性的添加或删除。

    1.4K40

    webpack性能优化(1):分隔分包异步加载+组件与路由懒加载

    为什么需要懒加载在单页应用中,如果没有应用懒加载,运用webpack打包后的文件将会异常的大,造成进入首页时,需要加载的内容过多,延时过长,不利于用户体验,而运用懒加载则可以将页面进行划分,需要的时候加载页面...webpcak 的按需加载已经完美解决了上述问题,但如何与webpack配合实现组件懒加载?...对于vue的路由配置文件(routers.js)用import引入的话,当项目打包时路由里的所有component都会打包在一个js中,造成进入首页时,需要加载的内容过多,时间相对比较长。.../component/header/header.vue')})关于webpack异步加载的问题多次进出同一个异步加载页面是否会造成多次加载组件?在多个地方使用同一个异步组件时是否造成多次加载组件?.../a/1190000013630936揭秘webpack按需加载原理 https://zhuanlan.zhihu.com/p/159216534vue项目实现按需加载的3种方式:vue异步组件、es提案的

    1.3K10
    领券