vue初学测试之webpack4.29.6集成vue-loader@15.7.0报错

最新推荐文章于 2025-04-08 16:40:59 发布

new_liu

最新推荐文章于 2025-04-08 16:40:59 发布

阅读量1.5k

点赞数

分类专栏： vue 文章标签： webpack继承vue-loader报错 vue-loader报错

本文链接：https://blog.youkuaiyun.com/u013492323/article/details/88943790

版权

vue 专栏收录该内容

12 篇文章

订阅专栏

本文介绍了解决Vue-loader在15.*版本后未正确配置插件导致的问题，并提供了一个具体的案例，包括完整的webpack配置和Vue文件示例。

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

报错

Module Error (from ./node_modules/vue-loader/lib/index.js): vue-loader was used without the corresponding plugin. Make sure to include VueLo aderPlugin in your webpack config.

百度找到了答案，原来Vue-loader在15.*之后的版本使用时，需要像html-webpack-plugin一样配置插件，在webpack.config.js里配置下面这一句就好了

解决方案：

//webpack.config.js
let VueLoaderPlugin = require('vue-loader/lib/plugin');
new VueLoaderPlugin()  //在plugins里new实例

具体案例代码：执行了npm init -y，完成插件依赖，依次install插件，新建vue文件和入口文件main，如下

//package.json
{
  "name": "newpro",
  "version": "1.0.0",
  "main": "index.js",
  "scripts": {
    "build": "webpack",
    "dev": "webpack-dev-server"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "vue": "^2.6.10",
    "vue-router": "^3.0.2"
  },
  "devDependencies": {
    "css-loader": "^2.1.1",
    "html-webpack-plugin": "^3.2.0",
    "style-loader": "^0.23.1",
    "vue-loader": "^15.7.0",
    "vue-template-compiler": "^2.6.10",
    "webpack": "^4.29.6",
    "webpack-cli": "^3.3.0",
    "webpack-dev-server": "^3.2.1"
  },
  "description": ""
}

//App.vue
<template>
    <div>{{msg}}</div>
</template>
<script>
// 结构template 行为script 样式style
export default {
    data(){
        return {
            msg:'hello'
        }
    }
}
</script>

//main.js
import Vue from 'vue';
import App from './App.vue';
new Vue({
    el:"#app",
    render:createElement=>createElement(App)
})

//webpack.config.js
let htmlWebpackPlugin = require('html-webpack-plugin');
let VueLoaderPlugin = require('vue-loader/lib/plugin');
let path = require('path');
module.exports = {
    mode:"development",
    entry:"./src/main.js",
    output:{
        filename:"build.js",
        path:path.resolve('./dist')
    },
    module:{
        rules:[
            {test:/\.css$/,use:['css-loader','style-loader']},//解析css文件
            {test:/\.vue$/,use:'vue-loader'}//解析vue文件，会自动关联vue-template-compiler解析vue模板
        ]
    },
    plugins:[
        new VueLoaderPlugin(),
        new htmlWebpackPlugin({
            template:'./src/index.html'
        })
    ]
}