跳到主內容

Laravel 8 + Vue 3 專案建置（PHP 7.4 支援）

🔧 專案名稱：DemoProject

由於 PHP 7.4 無法使用 Vite，因此本指南使用 Laravel Mix 來配置 Laravel 8 + Vue 3 專案。

✅ 步驟 1：安裝 Laravel 8

composer create-project laravel/laravel demo-project "8.*"
cd insure-next

啟動 Laravel 伺服器來確認專案正常運行：

php artisan serve

✅ 步驟 2：安裝 Vue 3

在專案目錄下執行以下指令來安裝 Vue 3 和相關套件：

npm install vue@3 vue-loader@next

✅ 步驟 3：修改 Laravel Mix 設定

開啟專案的 webpack.mix.js，修改如下：

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：
import { createApp } from 'vue';
import App from './App.vue';

createApp(App).mount('#app');
  1. 建立 resources/js/App.vue：
<template>
    <div>
        <h1>Welcome to DemoProject!</h1>
    </div>
</template>

<script>
export default {
    name: 'App',
};
</script>
  1. 建立 resources/sass/app.scss（如果尚未建立）：
mkdir -p resources/sass

在 resources/sass/app.scss 中新增基本樣式：

body {
    font-family: Arial, sans-serif;
    background-color: #f8f9fa;
}
  1. 建立 resources/css/app.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，內容如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>InsureNext</title>
    <link rel="stylesheet" href="{{ mix('css/app.css') }}">
</head>
<body>
    <div id="app"></div>

    <script src="{{ mix('js/app.js') }}"></script>
</body>
</html>

✅ 步驟 6：路由設定

在 routes/web.php 中新增以下路由設定，將所有頁面導向 Vue 入口頁面：

use Illuminate\Support\Facades\Route;

Route::get('/{any}', function () {
    return view('index');
})->where('any', '.*');

✅ 步驟 7：編譯資源

執行以下指令來編譯前端資源：

npm run dev

若要進行生產環境的編譯，執行：

npm run production

✅ 錯誤排除 1：Module not found: Error: Can't resolve 'app.scss'

如果你遇到以下錯誤：

Module not found: Error: Can't resolve 'resources/sass/app.scss'

請確保已建立 resources/sass/app.scss，或者修改 webpack.mix.js，移除 sass 編譯：

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

mix.js('resources/js/app.js', 'public/js')
    .vue();

✅ 錯誤排除 2：Unable to locate Mix file: /css/app.css

如果你遇到以下錯誤：

Unable to locate Mix file: /css/app.css

請依照以下步驟處理：

  1. 確認資源已正確編譯：
npm run dev
  1. 若問題仍未解決，清除 Laravel 快取：
php artisan config:clear
php artisan cache:clear
php artisan view:clear
  1. 確認檔案 public/css/app.css 存在。如果不存在，執行以下指令重新建立檔案：
npm run dev

✅ 完成！

現在你已經成功建置了一個 Laravel 8 + Vue 3 專案，專案名稱為 InsureNext。

Laravel 的路由設定已將所有頁面導向 Vue 入口頁面，並由 Vue Router 來處理前端頁面轉換。

回到頂端