自從 Vue CLI 3 發佈以來,如何將它整合在 Laravel 裡是不少開發者的疑問;因此 Vue 的老爸尤雨溪便針對這個問題寫了一個教學範例 ,本文即是參考該範例所寫,不過有根據 Laravel 的新特性做一些調整。

準備環境

開始前記得先安裝必要工具:

$ composer global install laravel/installer
$ composer global install laravel/valet
$ npm i -g @vue/cli

建立並修改 Laravel 專案

建立一個乾淨的 Laravel 5.7 專案,然後刪掉所有跟前端有關的目錄與檔案。

$ laravel new project
$ cd project
$ rm -rf package.json \
webpack.mix.js \
yarn.lock \
resources/view/welcome.blade.php \
resources/{js,sass} \
public/{js,css}

然後修改 routes/web.php ,將內容置換成:

<?php

use Illuminate\Support\Facades\Route;

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

為了避免建置後的靜態檔案被加入版本控制中,修改專案根目錄下的 .gitignore ,加入以下內容:

/public/js
/public/css
/public/img
/public/svg
/resources/views/index.blade.php

然後做版本控制。

$ git init
$ git add .
$ git ci -m "Init project"

接著用 Valet 來設定網站:

$ valet link
$ valet secure project

這樣我們測試用的網址即為 https://project.test

建立前端用資料夾

接下來用 Vue CLI 建立前端資料夾,以便管理所有跟前端有關的資源:

$ vue create frontend
# 這邊視專案規模來決定要用哪些設定

建立 frontend/vue.config.js ,內容如下:

module.exports = {
// 在專案開發中如果呼叫 API 時會 pass 給這個 proxy 網址
// 這邊就用前面以 Valet 建立的網站網址
devServer: {
proxy: 'https://project.test'
},

// 建置前端靜態檔案時要擺放的目錄
// 在 package.json 也要調整 "build" 這個 script
outputDir: '../public',

// 開發階段修改 index.html 來讓 js/css 可以作用
// 上線階段則會修改 Laravel 的樣版
indexPath: process.env.NODE_ENV === 'production'
? '../resources/views/index.blade.php'
: 'index.html'
}

然後修改 frontend/package.jsonscripts.build ,主要是避免把 public 整個刪除:

"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"
},

最後就可以用以下指令來開發或建置專案:

$ cd frontend
$ yarn # 安裝套件
$ yarn serve # 啟動開發用伺服器
$ yarn build # 建置上線用版本