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

根本原因：最新的vue-loader 15+以上，要求使用vueloaderplugin，需要变更webpack配置文件

一、报错代码：

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.
| 
> <h1>这是使用.vue文件渲染出来的</h1>
| 
| 
 @ ./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'}
        ]
    }
};

1.需要配置{test: /\.vue$/, use: 'vue-loader'}

2.还需要载webpack.config.js配置文件中加两行代码:

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

new VueLoaderPlugin()

三、补充出错原因

• vue-loader@15.*之后 必须配置带有VueLoaderPlugin 之外，还需另外单独配置css-loader。
• 如果是用最新webpack原生构建，除了安装webpack外，还要安装webpck-cli，在webpack.config中配置mode选项
• 为保持构建环境一致，请采用`npm run dev`脚本编译的形式，以确保使用的webpack命令，vue-loader是本地版本。

参考：https://blog.csdn.net/qq_16687863/article/details/98471766