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