vue-loader@15.x VueLoaderPlugin无法loader

最新推荐文章于 2025-06-06 10:29:35 发布

原创最新推荐文章于 2025-06-06 10:29:35 发布 · 3.8k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#vue #VueLoaderPlugin

vue 专栏收录该内容

17 篇文章

订阅专栏

本文详细介绍了在使用Vue进行项目开发时遇到的.vue文件无法编译的问题及解决方案。通过正确配置VueLoaderPlugin，实现.vue文件的有效加载和解析，确保项目正常运行。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在安装了Vue插件之后，发觉编译不了.vue文件，但是已经把vue-loader vue-template-compiler 都下载完毕，并且还在webpack.config.js里面配置了

 {test:/\.vue$/,use:'vue-loader'}

但是还是不行，一直提示：

client:162 ./src/login.vue
Module Error (from ./node_modules/_vue-loader@15.4.2@vue-loader/lib/index.js):
vue-loader was used without the corresponding plugin. Make sure to include VueLoaderPlugin in your webpack config.

后来发现是没有配置引包

const { VueLoaderPlugin } = require('vue-loader');

plugins:[
     new VueLoaderPlugin()
	]

配置完毕之后就可以正常的包vue文件了

附加：

webpack中如何使用vue
//1.安装vue包 cnpm i vue -D
//2.由于需要在webpack中要使用 .vue 这个组件模板定义组件所以需要下载安装能够解析 .vue 的loader
//cnpm i vue-loader vue-template-compiler -D
//3.在main.js文件中导入vue模块 import Vue from 'vue'
//4.定义一个.vue结尾的组件，里面的内容包括 template script style 这三大主标签
//5.需要在webpack.config.js 的配置文件里面定义组件 {test:/\.vue/,use:'vue-loader'}
//6.使用import xxx from './xxx.vue',导入这个组件
//7创建vm实例 var vm = New Vue({el:'#app',render:c=>c(xxx)})
//8.在页面中创建一个id为app的div元素，作为vm实例控制的区域