Laravel: Cài đặt Vue CLI 3 vào Laravel

Bản demo này giả định rằng bạn đang phục vụ ứng dụng Laravel này thông qua Valet tại laracon.test. Nếu bạn đang phục vụ ứng dụng Laravel tại một URL cục bộ khác, hãy sửa đổi nó tương ứng trong file frontend/vue.config.js.

Để chạy Frontend

cd frontend
yarn # hoặc npm install
yarn serve # hoặc npm run serve

# Dựng bản thành phẩm:
yarn build # OR npm run build

Các bước dựng

1. Trong xampp >> htdocs nhấn Shift + phím phải chuột rồi chọn Open PowerShell window here

2. Tạo app Laravel bằng việc thực hiện các lệnh sau:

   laravel new my-project
   cd my-project
   
   # Xóa frontend được tích hợp sẵn trong Laravel
   rm -rf package.json webpack.mix.js yarn.lock resources/assets

3. Tạo project Vue CLI 3 trong app Laravel

   vue create frontend
   # chọn router

4. Cấu hình project Vue

   Trong thư mục frontend bạn tạo file vue.config.js với nội dung như sau:

   module.exports = {
     // proxy API yêu cầu Valet trong quá trình phát triển
     devServer: {
       proxy: 'http://laracon.test'
     },
   
     // Các file tĩnh trong thư mục public của Laravel.
     // Lưu ý rằng các phần build trong package.json cần phải được sửa đúng.
     outputDir: '../public',
   
     // sửa đường dẫn của file HTML được tạo.
     // chỉ làm điều này khi build thành phẩm.
     indexPath: process.env.NODE_ENV === 'production'
       ? '../resources/views/index.blade.php'
       : 'index.html'
   }

   Sửa file frontend/package.json:

   "scripts": {
     "serve": "vue-cli-service serve",
   - "build": "vue-cli-service build",
   + "build": "rm -rf ../public/{js,css,img} && vue-cli-service build --no-clean",
     "lint": "vue-cli-service lint"
   },

5. Cấu hình Laravel cho single-page app (SPA).

   Mở file routes/web.php và thực hiện:

   <?php
   
   Route::get('/{any}', 'SpaController@index')->where('any', '.*');

   Tạo file app/Http/Controllers/SpaController.php và thực hiện:

   <?php
   
   namespace App\Http\Controllers;
   
   use Illuminate\Http\Request;
   
   class SpaController extends Controller
   {
       public function index()
       {
           return view('index');
       }
   }