# Laravel 8 + Vue 3 專案建置（PHP 7.4 支援）
## 🔧 **專案名稱：DemoProject**
由於 PHP 7.4 無法使用 Vite，因此本指南使用 **Laravel Mix** 來配置 **Laravel 8 + Vue 3** 專案。
---
## ✅ **步驟 1：安裝 Laravel 8**
```bash
composer create-project laravel/laravel demo-project "8.*"
cd insure-next
```
啟動 Laravel 伺服器來確認專案正常運行：
```bash
php artisan serve
```
---
## ✅ **步驟 2：安裝 Vue 3**
在專案目錄下執行以下指令來安裝 Vue 3 和相關套件：
```bash
npm install vue@3 vue-loader@next
```
---
## ✅ **步驟 3：修改 Laravel Mix 設定**
開啟專案的 **`webpack.mix.js`**，修改如下：
```javascript
const mix = require('laravel-mix');
mix.js('resources/js/app.js', 'public/js')
.vue()
.sass('resources/sass/app.scss', 'public/css')
.css('resources/css/app.css', 'public/css');
```
---
## ✅ **步驟 4：建立必要檔案**
1. **建立 `resources/js/app.js`**：
```javascript
import { createApp } from 'vue';
import App from './App.vue';
createApp(App).mount('#app');
```
2. **建立 `resources/js/App.vue`**：
```vue
Welcome to DemoProject!
```
3. **建立 `resources/sass/app.scss`**（如果尚未建立）：
```bash
mkdir -p resources/sass
```
在 **`resources/sass/app.scss`** 中新增基本樣式：
```scss
body {
font-family: Arial, sans-serif;
background-color: #f8f9fa;
}
```
4. **建立 `resources/css/app.css`**（如果有純 CSS 檔案的需求）：
```css
/* app.css */
body {
margin: 0;
padding: 0;
box-sizing: border-box;
}
```
---
## ✅ **步驟 5：修改 Blade 模板**
將 **`resources/views/welcome.blade.php`** 修改為 **`resources/views/index.blade.php`**，內容如下：
```html
InsureNext
```
---
## ✅ **步驟 6：路由設定**
在 **`routes/web.php`** 中新增以下路由設定，將所有頁面導向 Vue 入口頁面：
```php
use Illuminate\Support\Facades\Route;
Route::get('/{any}', function () {
return view('index');
})->where('any', '.*');
```
---
## ✅ **步驟 7：編譯資源**
執行以下指令來編譯前端資源：
```bash
npm run dev
```
若要進行生產環境的編譯，執行：
```bash
npm run production
```
---
## ✅ **錯誤排除 1：Module not found: Error: Can't resolve 'app.scss'**
如果你遇到以下錯誤：
```bash
Module not found: Error: Can't resolve 'resources/sass/app.scss'
```
請確保已建立 **`resources/sass/app.scss`**，或者修改 **`webpack.mix.js`**，移除 `sass` 編譯：
```javascript
const mix = require('laravel-mix');
mix.js('resources/js/app.js', 'public/js')
.vue();
```
---
## ✅ **錯誤排除 2：Unable to locate Mix file: /css/app.css**
如果你遇到以下錯誤：
```bash
Unable to locate Mix file: /css/app.css
```
請依照以下步驟處理：
1. 確認資源已正確編譯：
```bash
npm run dev
```
2. 若問題仍未解決，清除 Laravel 快取：
```bash
php artisan config:clear
php artisan cache:clear
php artisan view:clear
```
3. 確認檔案 **`public/css/app.css`** 存在。如果不存在，執行以下指令重新建立檔案：
```bash
npm run dev
```
---
## ✅ **完成！**
現在你已經成功建置了一個 **Laravel 8 + Vue 3** 專案，專案名稱為 **InsureNext**。
Laravel 的路由設定已將所有頁面導向 **Vue 入口頁面**，並由 **Vue Router** 來處理前端頁面轉換。