执行npm run build报错

来源:2-1 vue-loader+webpack项目配置

小白侯歌

2019-04-06 16:20


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'
            }
        ]
    }

这个已经配置了

写回答 关注

4回答

  • 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()]
    }


    嗳哭暧闹 回复慕粉3436...

    按照他们的操作还报错,那你在上面的基础上加上 { test: /\.css$/, use: [ 'style-loader', 'css-loader' ] }, 然后在命令行里面安装这里面所需要的loader(style-loader,css-loader)好像就可以了,你可以试试

    2019-04-16 17:42:25

    共 2 条回复 >

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

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

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

    plugins: [new VueLoaderPlugin()]


  • 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(),
       ],
    };


    Jason_...

    后一个的 module.exports 可以不用看,不小心打上去的

    2019-04-07 20:23:45

    共 1 条回复 >

  • 朱智硬
    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。 这样就和老师一样了

Vue+Webpack打造todo应用

用前端最热门框架Vue+最火打包工具Webpack打造todo应用

84605 学习 · 787 问题

查看课程

相似问题