Laravel+Vue项目安装Bootstrap后执行npm run dev出现Vue组件解析报错

执行php artisan ui bootstrap命令时会自动覆盖项目根目录下的webpack.mix.js配置文件，移除了原本的Vue编译相关规则，导致.vue单文件组件没有对应的loader处理，出现编译报错。

• 打开项目根目录下的webpack.mix.js文件
• 在配置中补充Vue编译支持，完整配置参考如下：

const mix = require('laravel-mix');

mix.js('resources/js/app.js', 'public/js')
    .vue() // 新增该行启用Vue单文件组件编译支持
    .sass('resources/sass/app.scss', 'public/css');

• 保存配置文件后重新执行npm run dev即可完成编译。

• 确认resources/js/app.js中未移除Vue初始化相关代码，示例参考：

import Vue from 'vue';
import Cards from './components/Cards.vue';

Vue.component('cards', Cards);

new Vue({
    el: '#app',
});

• 可以先清理Mix缓存后再重新编译：
  执行npx mix clear，再执行npm run dev

内容的提问来源于stack exchange，提问作者M.Koops