在 Laravel 8.0 整合 Vue 專案

Laravel
, , ,

做法

建立專案。

1
laravel new laravel-vue-cli-example

刪除與前端有關的檔案與目錄。

1
2
3
4
rm -rf package.json \
  webpack.mix.js \
  resources/views/welcome.blade.php \
  resources/{js,sass}

進到 resources 資料夾，新增 Vue 專案。

1
2
cd resources
vue create js

在 Vue 專案中建立 vue.config.js 檔：

1
2
3
4
5
6
module.exports = {
  outputDir: '../../public',
  indexPath: process.env.NODE_ENV === 'production'
    ? '../resources/views/app.blade.php'
    : 'index.html',
};

修改 Vue 專案中的 package.json 檔：

1
2
3
4
5
6
7
8
{
  "name": "laravel-vue-cli-example",
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "rm -rf ../../public/{js,css,img} && vue-cli-service build --no-clean",
    "lint": "vue-cli-service lint"
  }
}

修改後端的 web.php 路由：

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

修改根目錄的 .gitignore 檔：

1
2
3
4
/public/js
/public/css
/public/img
/resources/views/app.blade.php

編譯

進到 Vue 專案，啟動服務。

1
yarn serve

進到 Vue 專案，編譯靜態檔案。

1
yarn build

參考資料

程式碼