vue-loader加载不上报错* ./node_modules/vue-loader/lib/index.js You may need an additional loader to handle

报错代码:

ERROR in ./src/login.vue?vue&type=template&id=19e76240& 2:0
Module parse failed: Unexpected token (2:0)
File was processed with these loaders:
 * ./node_modules/vue-loader/lib/index.js
You may need an additional loader to handle the result of these loaders.
| 
> 

这是使用.vue文件渲染出来的

| | @ ./src/login.vue 1:0-84 10:2-8 11:2-17 30:4-35:6 30:68-35:5 32:16-22 33:25-40 @ ./src/main.js

解决办法:

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


module.exports = {
    entry: path.join(__dirname,'./src/main.js'),
    output: {
        path: path.join(__dirname, './dist'),
        filename: 'bundle.js'
    },
    plugins: [
        new htmlWebpackplugin({ //创建一个在内存中生成的html页面的插件
            template: path.join(__dirname, './src/index.html'),
            filename: 'index.html'
        }),
        new VueLoaderPlugin()
    ],
    module: { //这个节点用于配置所有的第三方模块加载器
        rules: [
            {test: /\.css$/, use:['style-loader','css-loader']},//配置处理.css文件的第三方处理规则
            {test: /\.less$/, use: ["style-loader",'css-loader','less-loader']},
            {test: /\.scss$/, use: ["style-loader",'css-loader','sass-loader']},
            {test: /\.(jpg|png|gif|bmp|jpeg)$/, use: "url-loader?limit=8000"},
            {test: /\.(tff|eot|svg|woff|woff2)$/, use: "url-loader"},
            {test:/\.js$/, use:'babel-loader',exclude:/node_modules/},
            {test: /\.vue$/, use: 'vue-loader'}
        ]
    }
};

出来需要配置{test: /\.vue$/, use: 'vue-loader'}这个外,还需要载webpack.config.js配置文件中加两行代码:

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

new VueLoaderPlugin()
 

你可能感兴趣的:(前端,#,vue)