                        课程
                    
                        /前端开发
                        
                            /前端工具
                        
                        /Vue+Webpack打造todo应用

执行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

源自：Vue+Webpack打造todo应用 2-1

关注问题我要回答

1668

操作

收起

4 回答

imi_
2019-04-10

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 回复有任何疑惑可以回复我~

收起回答

慕粉3436126

按照这样改了，还是同样的报错

2019-04-14 回复有任何疑惑可以回复我~

嗳哭暧闹回复慕粉3436126

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

2019-04-16 回复有任何疑惑可以回复我~

寒桥
2019-04-09

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

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

plugins: [new VueLoaderPlugin()]

1 回复有任何疑惑可以回复我~

收起回答

Jason_derknight
2019-04-07

我觉得你可以这样：

在 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 回复有任何疑惑可以回复我~

收起回答

Jason_derknight

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

2019-04-07 回复有任何疑惑可以回复我~