webpack 安装vue组件的加载器vue-loader出现报错

最新推荐文章于 2024-05-05 08:05:01 发布
最新推荐文章于 2024-05-05 08:05:01 发布
阅读量1.6k 收藏 6
点赞数 5
文章标签： webpack vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43958820/article/details/118443397
版权

webpack 安装vue组件的加载器vue-loader出现报错

报错内容:找不到vue-loader/lib/plugin这个路径

不知道是不是bug 新版vue-loader16.3没有/lib/plugin这个路径 可能是网络丢包 或是其他原因 就算配置了也会出现报错 主要原因还是这个路径没有
在这里插入图片描述
判断这个路径是否有的方法就是按住Ctrl键+鼠标左键点击 如果有跳转就是有路径 没有跳转和下划线就是没有路径

主要原因就是版本不对 把最新版换成15.9.2,前后来去不大 好用就行

解决方法:
npm install vue-loader vue-template-compiler -D
这一步是下载两个包,下载好后,
npm uninstall vue-loader
把vue-loader卸了,然后到package.json的devDependencies中添加"vue-loader": “^15.9.2”,
npm install
路径问题就解决了

黄龙俊
关注
  • 5
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
markdown-to-vue-loader:Markdown到Webpack的Vue组件加载器
05-27
Markdown到Vue组件加载器。 内置的markdown解析器是 。 。 特征 支持Vue 2和Vue 3。 支持将markdown文件加载为Vue组件。 支持将代码块（默认情况下为Vue和HTML）加载为Vue组件。 支持10个。 入门 安装 npm ...
webpack loader 从上手到理解系列：vue-loader
chern1992的博客
06-18 857
1 什么是vue-loader 「vue-loader」是一个 webpack 的 loader，它允许你以一种名为单文件组件的格式撰写 Vue 组件。 2 如何使用vue-loader 2.1 安装vue-loader npm install vue-loader vue-template-compiler --save-dev 2.2 配置webapck // webpack.config.js const VueLoaderPlugin = require('vue-loa...
Webapck 解决：[webpack-cli] Error: Cannot find module ‘vue-loader/lib/plugin‘ 的问题
狮子座的男孩
10-12 2430
在项目打包的时候 `npm run build`，控制台报错，并抛出一个 `Cannot find module 'vue-loader/lib/plugin'` 的问题；
源码学习 vue-loader源码
倪晓磊的博客
02-04 833
按执行流程一步步看vue-loader 源码 通常配置webpack 时，我们会配置一个 loader 和 一个 plugin // webpack.config.js const VueLoaderPlugin = require('vue-loader/lib/plugin') // ... { test: /\.vue$/, loader: 'vue-loader' }, // ... plugins: [ new VueLoaderPlugin(), ] 当我们运行 webpack 时， 首
【记录解决导入 vue-loader 的内置插件报错的过程】
lt012345的博客
05-09 2341
记录解决导入 vue-loader 的内置插件报错的过程： 文章目录记录解决导入 vue-loader 的内置插件报错的过程： @[TOC](文章目录)一、按 const VueLoaderPlugin = require('vue-loader/lib/plugin') 方式导入的报错二、使用步骤1.引入库2.读入数据总结 一、按 const VueLoaderPlugin = require(‘vue-loader/lib/plugin’) 方式导入的报错 在学习到 webpack 中配置 vue 组件
Vue CLI 3 安装、创建、配置、安装插件
汉堡请不要欺负面条
01-04 1万+
一、安装 1、全局安装过旧版本的 vue-cli(1.x 或 2.x)要先卸载它： npm uninstall vue-cli -g //或者 yarn global remove vue-cli 注意：如果卸载不了(我卸载2.9.6，还剩下一个2.9.3版本一直卸载不了),就直接安装vue cli3，包直接安装就能覆盖掉 2.安装 vue cli3 npm install -g @vue/...
webpack配置vue组件加载器
qq_45437773的博客
11-26 1360
看黑马教程，关于此方面进行操作后发现一些问题，并尝试解决。版本开始就已经放弃了上述的引入方式，改以。方式引入VueLoaderPlugin。查了两个文章后，发现是[重新打包，可以正常进行。
Cannot find module 'vue-loader/lib/plugin'
热门推荐
qq_39882537的博客
03-25 1万+
安装了 webpack4 的版本之后发现报这个错 Cannot find module ‘vue-loader/lib/plugin’ 然后上node-modules 里找了一下还真没有/plugin，所以我肯定是 vue-loader 的版本问题 升级了一下 “vue-loader”: “^15.7.0” 就好了 ...
webpack打包vue时出错 Cannot find module 'vue-loader/lib/plugin' 是什么问题
weixin_45978051的博客
03-20 8122
@TOC 欢迎使用Markdown编辑器 你好！ 这是你第一次使用 Markdown编辑器 所展示的欢迎页。如果你想学习如何使用Markdown编辑器, 可以仔细阅读这篇文章，了解一下Markdown的基本语法知识。 新的改变 我们对Markdown编辑器进行了一些功能拓展与语法支持，除了标准的Markdown编辑器功能，我们增加了如下几点新功能，帮助你用它写博客： 全新的界面设计 ，将会带来全...
vue-separate-files-webpack-loader：用于Webpack的Vue分隔组件加载器
02-24
Vue单独的文件Webpack加载器 快速创建.vue单个文件组件，使您可以拥有清晰分离的组件文件，并仍然享受优势。 按文件名处理文件（而不是将所有文件加载到文件夹中）并动态创建.vue文件（而不是创建物理文件） 允许...
md-vue-loader:Webpack加载器，用于将Markdown编译为Vue
05-01
md-vue-loader是一个Webpack加载器，用于将Markdown文件作为Vue组件导入。 :person_raising_hand: 为什么？ :raising_hands: 从与Vue公司的任何版本兼容解耦（ / vue-template-compiler ）！ :woman::artist_...
vue-template-loader：用于Webpack的Vue.js 2.0模板加载器
02-06
Vue模板加载器 适用于Webpack的Vue.js 2.0模板加载器该加载器使用将html模板预编译为渲染函数。 每个html文件都转换为一个函数，该函数带有一个vue组件选项对象，并注入一个render函数，样式和HMR支持。 在大多数...
vue-svg-icon-loader:将SVG文件转换为VueJS组件
05-17
适用于Webpack的Vue SVG图标加载器这是一个Webpack加载程序，可将SVG图标转换为可直接导入的vuejs组件。 您可以导入这些文件，然后直接在您的Vue应用程序中使用它们： < template> < div> ...
使用webpack搭建vue开发环境（一）
zuodandan_123的博客
03-05 381
1.参考之前博文webpack的使用，搭建目录结构，安装好webpack和之前提到过的配置工具。 2.安装Vue cnpm i vue -S 3.导入vue包 import Vue from 'vue' 注意：在webpack中，使用 import Vue from 'vue' 导入的vue构造函数，功能不完整，只提供了 runtime-only 的方式，并没有提供像网页中那样的使用方...
vue-loader was used without the corresponding plugin.
qq_37160067的博客
04-29 4358
为了引入.vue文件，安装完vue-loader和vue-template-compiler后，运行报错：vue-loader was used without the corresponding plugin.Make sure to include VueLoaderPlugin in your webpack config.百度了一下，是因为vue-loader，15的版本需要再添加plug...
vue-loader 报错解决方法
youngeffort的博客
08-26 4986
报错情况：Module build failed (from ./node_modules/vue-loader/lib/index.js 原因：vue-loader的版本和vue-template-compiler版本不匹配 解决： 1、把node_modules 删除之后，输入以下命令(一定这个顺序)： 2、 1 npm install vue-template-compiler -D 2 npm install 3 npm run serve ...
vue-loader版本报错
Source
09-18 3870
vue-loader was used without the corresponding plugin. Make sure to include VueLoaderPlugin in your webpack config. 打包运行时如有报错 vue-loader was used without the corresponding plugin. Make sure to include VueLoaderPlugin in your webpack config. 说明vue-loader版
vue-loader加载错误问题
Bekind2010的专栏
01-30 508
但是神奇的是，这俩文件B和C对应的hash是一样的，这就导致编译的时候先编译了C，后面再遇到B时，由于hash相同，直接从缓存cache中取出C的编译结果，导致B渲染成了C。虽然问题不难解决，但是定位问题的过程还是挺麻烦的，还是请教了其他同事，才定位到vue-loader的parse函数的。然而实际页面渲染的时候，将B组件渲染成了C。将编译后的结果存储在cache中，后续如果命中缓存，就存缓存中读取，提升编译效率。发现其内部虽然指示了B组件，但是生成的render函数是C组件，所以最终渲染的也是C组件。
vue如何进行webpack的配置
最新发布
codemami的博客
05-05 675
如果你使用的是 Vue CLI 创建的项目，并且只是想进行一些小的 Webpack 配置调整，你可以考虑使用 Vue CLI 的配置文件（例如 vue.config.js）来进行调整，而不是完全手动配置 Webpack。然而，如果你想要手动配置 Webpack 或者有特定的需求，你也可以在 Vue 项目中直接进行 Webpack 的配置。这个配置指定了入口文件（你的 Vue 应用的入口），输出文件的名称和位置，以及如何处理 .vue 和 .css 文件。选择你需要的配置，或者手动选择特性。
vue2安装vue-style-loader!css-loader
04-27
你可以通过以下命令来安装 vue-style-loader 和 css-loader： ``` npm install vue-style-loader css-loader --save-dev ``` 或者 ``` yarn add vue-style-loader css-loader --dev ``` 安装完成后，在 webpack 配置文件中添加以下配置： ```js module.exports = { module: { rules: [ { test: /\.css$/, use: ['vue-style-loader', 'css-loader'], }, ], }, }; ``` 这样就可以在 Vue 组件中使用样式了。例如： ```vue <template> <div class="my-component"> <h1>Hello World!</h1> </div> </template> <style> .my-component { background-color: #f0f0f0; padding: 20px; } </style> ```

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值