Laravel Mix 編譯 Vue 踩坑記錄

MArtian發表於2021-09-13
Laravel編譯Vue

環境：

// 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 否則會報錯
const app = new Vue({
    el: '#app'
});

執行，關於 .default 的說明看這裡 github.com/vuejs/vue-loader/releas...

npm run dev

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

本作品採用《CC 協議》，轉載必須註明作者和本文連結

相關文章