Kongsi rekod perangkap Vue kompilasi Laravel Mix

Berikut ialah rekod perangkap Vue yang disusun oleh Laravel Mix daripada lajur tutorial Laravel Saya harap ia dapat membantu rakan-rakan yang memerlukannya.

Laravel Mix Compile Vue Pitfall Record

Persekitaran:

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

NPM pertama perlu memasang dependencies vue, vue-loader, vue-template-compiler

Kemudian buka fail webpack.mix.js

// 将
mix.js('resources/js/app.js', 'public/js')
// 修改为
mix.js('resources/js/app.js', 'public/js').vue()

Buka /resources/js/app.js

import Vue from 'vue'  // 必须引入 vue 
require('./bootstrap');
Vue.component('welcome-component', require('./components/WelcomeComponent.vue').default); // 组件后需要添加 .default 否则会报错
const app = new Vue({
    el: '#app'
});

Pelaksanaan, untuk arahan tentang .default, lihat di sini https://github.com/vuejs/vue-loader/releases/tag/v13.0.0

npm run dev

Itu sahaja, gunakan Laravel- There adalah beberapa perubahan selepas Campuran 6, yang direkodkan di sini.

Atas ialah kandungan terperinci Kongsi rekod perangkap Vue kompilasi Laravel Mix. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!