下面由Laravel教程欄目給大家分享一個(gè)Laravel Mix 編譯 Vue 踩坑記錄，希望對(duì)需要的朋友有所幫助！

Laravel Mix 編譯 Vue 踩坑記錄

環(huán)境：

// package "laravel-mix": "^6.0.6", // composer "laravel/framework": "^8.54" node version v15.14.0 npm version 7.7.6

首先 npm 需要安裝依賴 vue, vue-loader, vue-template-compiler

然后打開 webpack.mix.js 文件

// 將 mix.js('resources/js/app.js', 'public/js') // 修改為 mix.js('resources/js/app.js', 'public/js').vue()

打開 /resources/js/app.js

import Vue from 'vue'  // 必須引入 vue  require('./bootstrap'); Vue.component('welcome-component', require('./components/WelcomeComponent.vue').default); // 組件后需要添加 .default 否則會(huì)報(bào)錯(cuò) const app = new Vue({     el: '#app' });

執(zhí)行，關(guān)于 .default 的說明看這里 https://github.com/vuejs/vue-loader/releases/tag/v13.0.0

npm run dev

到此就差不多了，使用 Laravel-Mix 6 之后有一些變化，這里記錄一下。