Laravel项目升级vue-loader至15.2.1后编译与组件挂载问题求助

问题根源 #

vue-loader 15.x版本重构了内部loader机制，和Laravel Mix 2.x的默认配置存在兼容性冲突：

• 手动添加vue-loader规则会覆盖Mix的默认配置，导致模板（Pug）和样式（Sass）的loader未被正确关联
• 未正确配置vue-loader的选项来处理Pug模板，导致样式编译时误解析了模板内容

分步解决方案 #

1. 移除手动添加的vue-loader规则

先把你在webpack配置里加的这段规则删掉：

rules: [ { test: /\.vue$/, loader: 'vue-loader' } ]

Laravel Mix已经内置了vue-loader的配置，手动添加会覆盖原有规则，导致模板和样式的loader链断裂。

2. 完善webpack.mix.js配置

更新你的webpack.mix.js，确保正确引入VueLoaderPlugin，并配置vue-loader的选项来处理Pug和Sass：

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

mix.js('resources/assets/js/app.js', 'public/js')
    .copy('resources/assets/fonts/', 'public/fonts/')
    .webpackConfig({
        plugins: [
            new VueLoaderPlugin()
        ],
        resolve: {
            alias: {
                'Global': path.resolve('resources/assets/sass'),
                'vue$': 'vue/dist/vue.common.js' // 确保使用完整版Vue，支持模板编译
            }
        },
        module: {
            rules: [
                // 处理Pug模板（单文件组件内的<template lang="pug">）
                {
                    test: /\.pug$/,
                    oneOf: [
                        // 针对vue组件内的pug模板
                        {
                            resourceQuery: /^\?vue/,
                            use: ['pug-plain-loader']
                        },
                        // 针对独立的pug文件
                        {
                            use: ['pug-loader']
                        }
                    ]
                }
            ]
        }
    });

3. 安装缺失的关键依赖

vue-loader 15.x必须搭配vue-template-compiler才能正确编译模板，你当前的package.json里缺少这个依赖，执行以下命令安装：

npm install vue-template-compiler@^2.5.16 --save-dev

注意：vue-template-compiler的版本必须和你安装的vue版本完全一致（你当前vue是2.5.16，所以也要装2.5.16版本的compiler）

4. 清理缓存并重新构建

执行以下命令清理缓存、重装依赖，然后重新构建项目：

npm cache clean --force
rm -rf node_modules
rm package-lock.json
npm install
npm run watch

为什么这样能解决问题？ #

• VueLoaderPlugin是vue-loader 15.x强制要求的插件，必须在webpack plugins中注册才能正常工作
• 配置pug-plain-loader处理vue组件内的Pug模板，避免和独立Pug文件的loader冲突
• 保留Laravel Mix的默认vue-loader配置，确保样式（Sass）的loader链正确执行
• 安装vue-template-compiler让vue-loader能正确编译模板生成render函数，解决“template or render function not defined”的警告

内容的提问来源于stack exchange，提问作者Никита Гулис