问答详情
源自：2-1 vue-loader+webpack项目配置

执行npm run build报错


ERROR in ./src/app.vue
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.
 @ ./src/index.js 2:0-27 8:17-20

ERROR in ./src/app.vue?vue&type=style&index=0&lang=css& 16:0
Module parse failed: Unexpected character '#' (16:0)
You may need an appropriate loader to handle this file type.
|
|
> #test{
|       color: red;
| }
 @ ./src/app.vue 4:0-63
 @ ./src/index.js

ERROR in ./src/app.vue?vue&type=template&id=5ef48958& 2:0
Module parse failed: Unexpected token (2:0)
You may need an appropriate loader to handle this file type.
|
> <div id="test">{{text}}</div>
|
 @ ./src/app.vue 1:0-82 11:2-8 12:2-17
 @ ./src/index.js


------------------------------------

    module:{
        rules:[
            {
                test:/.vue$/,
                loader: 'vue-loader'
            }
        ]
    }

这个已经配置了

提问者：小白侯歌 2019-04-06 16:20

个回答

  • imi_
    2019-04-10 11:14:55

    const path = require('path')
const VueLoaderPlugin = require('vue-loader/lib/plugin');

module.exports = {
    entry:path.join(__dirname,'src/index.js'),
    output:{
        filename:'bundle.js',
        path:path.join(__dirname,'dist')
    },
    module:{
        rules:[
            {
                test:/\.vue$/,
                loader:'vue-loader'
            },
            {
                test:/\.css$/,
                loader: 'css-loader'
            }
        ]
    },
    plugins: [new VueLoaderPlugin()]
}


    1
  • 寒桥
    2019-04-09 00:05:27

    第一步在module.exports上边引入vue-loader插件：const VueLoaderPlugin = require('vue-loader/lib/plugin');

    第二步：在module.exports最下边添加：

    plugins: [new VueLoaderPlugin()]


    1
  • Jason_derknight
    2019-04-07 19:57:27

    我觉得你可以这样：

    在 webpack.config.js 中加入

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

module.exports = {
    ...
    plugins: [
        new VueLoaderPlugin(),
    ],
};

    module.exports = {
       entry: path.join(__dirname, "src/main.js"),
       output: {
           filename: "bundle.js",
           path: path.join(__dirname, "diets"),
       },
       module: {
           rules: [
               {
                   test: /.vue$/,
                   loader: 'vue-loader'
               }
           ]
       },
       plugins: [
           new VueLoaderPlugin(),
       ],
    };


    3
  • 朱智硬
    2019-04-07 19:27:13

    https://vue-loader.vuejs.org/zh/guide/#%E6%89%8B%E5%8A%A8%E8%AE%BE%E7%BD%AE

    新版本的vue-loader 要求必须手动添加vueLoaderPlugin. 老师的那个配置是老版本的。

    我建议去老师的这个项目的git，https://github.com/Jokcy/vue-todo-tech/blob/master/package.json

    直接copy package.json 来install。 这样就和老师一样了

    0